0

都市の入力チェックボックスがたくさんあります。最初のチェックボックスにAllという名前を付けました。ユーザーがそれを選択すると、[すべて]チェックボックスのみが選択され、他の都市のチェックボックスは選択されません。

ユーザーが他の都市をチェックした場合、[すべて]チェックボックスは自動的にオフになります。JavaScriptまたはjQueryでこれを実行したいと思います。

<input type="checkbox" name="city_pref[]" id="city_all" value="0" checked /><label for="city_all">All</label>
<input type="checkbox" name="city_pref[]" id="city_pref_1" value="Chicago" /><label for="city_pref_1">Chicago</label>
<input type="checkbox" name="city_pref[]" id="city_pref_2" value="Texas" /><label for="city_pref_2">Texas</label>

等々....

4

6 に答える 6

3

これを試して

​$(function(){
    var el=$('input:checkbox[name="city_pref[]"]');
    el.on('change', function(e){
        if($(this).is(':checked')) el.not($(this)).prop('checked', false);
    });
});​

デモ。

更新：（質問の明確化後）

$(function(){
    var el=$('input:checkbox[name="city_pref[]"]');
    el.on('change', function(e){
        if($(this).attr('id')!='city_all')
        {
            if($(this).is(':checked')) $('#city_all').prop('checked', false);
        }
        else
        {
            if($(this).is(':checked')) el.not($(this)).prop('checked', false);
        }
    });
});​

デモ。

更新:(2012 年 7 月 23 日)

I want the functionality, when no checkbox is selected, then All will get selected automatically

デモを更新しました。

于 2012-07-15T18:16:39.813 に答える
2

Darin の言う通りですが、誰かがこの問題を解決するためのヒントを教えてくれるとよいでしょう。質問を正しく読んだ場合、必要な唯一の動的な動作は、誰かが「すべて」ではないボックスにチェックを入れたときです。この場合、「すべて」ボックスのチェックを外します。

では、問題を細かく分割する必要があります。これが私がすることです：

  • 「すべて」ではないすべてのコントロールに関数をアタッチします。私はクラスセレクターでこれを行いますが、同様に「名前を付けない」アプローチを行うこともできます（Yograj Guptaの回答による）
  • イベント ハンドラー内にif、コントロールがチェックされていることがわかった場合にのみ実行されるステートメントを用意します (つまり、「すべて」が選択されているときに都市のチェックを外すと、何も起こりません)。
  • ifステートメントが実行される場合は、「すべて」コントロールのチェックを外します

これらの各項目は、jQuery ドキュメントを参照できるほど十分に小さいものになりました。もちろん、この場合、いくつかの既製のソリューションがありますが、プログラマーとして自己改善したい場合は、問題を分解するアプローチが非常に重要です。

補遺: また、一般的なフォーラムの質問に対する良いヒントです。回答が要件の 80% に達していることがわかった場合は、残りの 20% を自分で実装してみてください。誰もが時々助けを求めなければならないので、常に可能であるとは限らないことに同意しますが、長期的には学習プロセスに役立つことがわかる良い習慣です.

于 2012-07-15T18:31:18.777 に答える
2

このようにできます。

ライブデモ

$('#city_all').change(function(){   
    if($(this).is(':checked'))
       $('input:checkbox[name^=city_pref]').attr('checked','checked'); 
    else
        $('input:checkbox[name^=city_pref]').removeAttr('checked'); 
});

$('input:checkbox[name^=city_pref]').change(function(){    
    if($('input:checkbox[name^=city_pref]').not(':checked').length > 0)
        $('#city_all').removeAttr('checked'); 
    else
        $('#city_all').attr('checked','checked'); 
});

注: 他の都市とすべての都市を区別するには、別の名前を付けます。
</p>

于 2012-07-15T18:31:33.220 に答える
0

私はここに私のものを投げます

$(function () {
    $('.checkbox-all .all').attr('disabled', true); //comment out if you want them to be able to toggle the all checkbox, but their input would be overwritten so I just disable it.

    $('.checkbox-all input[type="checkbox"]').change (function () {
        var numSelected = $(this).parent().children(':checked:not(.all)').length;
        $(this).siblings('.all').attr('checked', (numSelected == 0));
    });
});

HTML の場合:

<div class="checkbox-all">
    <input class="all" type="checkbox" name="city_pref[]" id="city_all" value="0" checked /> <label for="city_all">All</label><br/>
    <input type="checkbox" name="city_pref[]" id="city_pref_1" value="Chicago" /> <label for="city_pref_1">Chicago</label><br/>
    <input type="checkbox" name="city_pref[]" id="city_pref_2" value="Texas" /> <label for="city_pref_2">Texas</label>
</div>

参考までlabelに、例では要素が正しく設定されていませんfor。HTML で属性を正しく設定しました。

于 2012-07-15T18:28:55.840 に答える
0

助けを求める前に、まず自分のコードを実装しようとするべきですが、何かを始める方法を本当に知らない人を助けるのは公平だと思います。だから、私はこのJSFiddleを作りました

<input type="checkbox" class="all">all</input>
<input type="checkbox" name="city" class="london city">london</input>
<input type="checkbox" name="city" class="rome city">rome</input>
<input type="checkbox" name="city" class="tokio city">tokio</input>


 $('.all').click(function(){

 $('input[name=city]').attr("checked", true)

     })

     $('.city').click(function(){

         $('input[type=checkbox]').attr("checked", false)


         $(this).attr("checked", true)                      

     })

</p>

于 2012-07-15T18:16:24.340 に答える
0

これを試して

$('input:checkbox[name^=city_pref]').click(function(){
    if(this.id =="city_all"){
        $(this).siblings("input:checkbox").attr('checked',false);
    }
    else{
        $('#city_all').attr('checked',false);
    }
});
于 2012-07-15T18:16:44.597 に答える