2

「すべて選択」チェックボックス（A）とそれに関連するその他のチェックボックス（B）があります。

私は願います：

  1. Aがチェックされているかどうかにかかわらず、BのすべてをAと同じにします。
  2. Bがすべてチェックされたら、Aをチェックします。
  3. Bのすべてがチェックされていない場合は、Aのチェックを外します。

JQuery を使用することをお勧めしますが、HTML5 を使用するより良い方法はありますか?

お気に入り：

<checkbox id="target" name="select all"/>
<checkbox relatetd="target" name="1"/>
<checkbox relatetd="target" name="2"/>

または、異なるDOM構造を持つ多くのサブグループがある場合、xpathのようなもの:

<checkbox id="target" name="select all"/>
<div>
    <checkbox relatetd="../" name="1"/>
    <checkbox relatetd="../" name="2"/>
</div>

<checkbox id="target2" name="select all"/>
<div>
    <div>
        <checkbox relatetd="../../" name="1"/>
        <checkbox relatetd="../../" name="2"/>
    </div>
</div>
4

4 に答える 4

3 
<input type="checkbox" id="checkAll" /> Check / Uncheck All

<input type="checkbox" class="chk" value="option1" /> Option 1
<input type="checkbox" class="chk" value="option2" /> Option 2
<input type="checkbox" class="chk" value="option3" /> Option 3




$('#checkAll').change(function () {
    $('.chk').prop('checked', this.checked);
});

$(".chk").change(function () {
    if ($(".chk:checked").length == $(".chk").length) {
        $('#checkAll').prop('checked', 'checked');
    } else {
        $('#checkAll').prop('checked', false);
    }
});

デモ

これはあなたのために働くはずです

于 2013-07-11T09:50:16.120 に答える
0

ここに明確な方法があります。チェックボックス用の 4 つの CSS クラスです。

  • family、parent、child関係の場合、

  • そしてinvalidステータスについて。

チェックとは、ファミリ内のすべての有効なチェックボックスを選択parentすることを意味します。ネストされたファミリをサポートします。

デモ： http: //jsfiddle.net/doraeimo/c4K4E/

<fieldset class="family" >
<legend>big_family</legend>
<label>select all
    <input type="checkbox" class="parent" name="select_all"/>
</label>

<fieldset class="family">
    <legend>sub_family_1</legend>
    <label>select all
        <input type="checkbox" class="parent"/>
    </label>
    <div>
        <input type="checkbox" class="child"/>
        <input type="checkbox" class="child"/>
        <input type="checkbox" class="child invalid"/>
    </div>
</fieldset>

<fieldset class="family">
    <legend>sub_family_2</legend>
    <label> select all
        <input type="checkbox" class="parent"/>
    </label>
    <div>
        <input type="checkbox" class="child"/>
        <input type="checkbox" class="child"/>
        <input type="checkbox" class="child invalid"/>
    </div>
</fieldset>

</fieldset>
于 2013-07-11T14:27:28.693 に答える
0

答えがあるようですが、念のため別のバリエーションを示します。

//Fill in all check marks for the Copy Feature when "select all" is chosen
$('#all').click(function(){
    var isChecked = $(this).is(':checked');
    $.each($('input[type="checkbox"][id^="copy_"]'),function(){
        $(this).attr('checked', isChecked);
    })
    if (isChecked){
        $('#labelAll').html('Unselect All');
    }else{
        $('#labelAll').html('Select All');
    }
});

jsfiddle

于 2013-07-11T18:03:18.487 に答える