0

つまり、基本的にここに私のjsFiddleがあります-http ://jsfiddle.net/CmNFu/。

そしてここにもコードを-

HTML-

<b style="float: left; margin-right: 10px;">category 1</b><input type="checkbox" value="category1" style="float: left;" class="portfolio-category" /><br />
<b style="float: left; margin-right: 10px;">category 2</b><input type="checkbox" value="category2" style="float: left;" class="portfolio-category" /><br />
<br />
<br />
<input type="text" name="categories" id="portfolio-categories" />​

jQuery-

jQuery(document).ready(function() {
    jQuery(".portfolio-category").click(function() {
        if(jQuery(this).is(":checked")) {
            jQuery("#portfolio-categories").val(jQuery("#portfolio-categories").val()+" "+jQuery(this).val());
        }
        else {
            var portfolioCategories = jQuery("#portfolio-categories").val();    
            alert("before + "+portfolioCategories);
            var currentElement = jQuery(this).val()+" ";
            alert(currentElement);
            portfolioCategories = portfolioCategories.replace(currentElement, "");
            alert(portfolioCategories);
        }
    });
});

基本的に私が達成したいのは、ユーザーがチェックボックスをオンにすると、値が入力フィールド内に自動的に追加されることです（完了、動作しています、おっと！）が、問題は、チェックボックスをオフにすると、値を削除する必要があることです。入力ボックス（問題はここから始まります）、それは何も削除しません。val（）関数を変数に割り当てようとしましたが、成功しなかったことがわかります。jsFiddleで私の例をチェックして、ライブで確認してください。

助言がありますか？replace（）がval（）に対して機能していないと思いますか？

それで、他に何か提案はありますか？

4

3 に答える 3

3

私はこれをします：

jQuery(document).ready(function() {
    jQuery(".portfolio-category").on('change', function() {
        var string = "";
        $('input[type="checkbox"]').each(function() {
            var space = string.length>0?' ':'';
            string += this.checked?space+this.value:'';
        });
        $("#portfolio-categories").val(string);
    });
});

フィドル

于 2012-08-01T13:40:02.137 に答える
2

その入力ボックスのスペースにはかなりの問題があります。それについてはすぐに説明します。

まず、これは一種の機能です（スペースの問題がなければ）：

最後のアラートの前に次の行を追加します。

 jQuery("#portfolio-categories").val(portfolioCategories);

これは機能しますが、追加する最後の要素の後にスペースがないため、常にではありません。

ただし、4行目を次のように変更すると:

jQuery("#portfolio-categories").val(jQuery("#portfolio-categories").val()+jQuery(this).val()+" ");

各要素の前ではなく後にスペースを追加するため、機能します。

http://jsfiddle.net/CmNFu/5/

問題は、変数の値を変更したことでした:portfolioCategoriesが、入力自体を更新していません。(文字列の値を変更しても、元の入力の値は変更されないことに注意してください)

于 2012-08-01T13:40:04.193 に答える
0

必要なのは、文字列のポートフォリオ カテゴリを入力に挿入することです。また、スペースは多くの問題を引き起こしています。$.trim(str) を使用して、文字列から先頭と末尾のスペースを削除できます。機能するソリューションでフィドルを更新しました。

http://jsfiddle.net/CmNFu/11/

お役に立てれば。

于 2012-08-01T13:46:35.217 に答える