構建「全選」複選框的最佳方法

我有一個「全選」複選框（A）和其他一些與之相關的複選框（B）。構建「全選」複選框的最佳方法

我希望：

當A的檢查與否，使所有B的一樣A.
當所有B的檢查中，做出的檢查。
當並非所有的B被檢查，使A沒有被檢查。

使用JQuery是首選，，但有沒有更好的方法與HTML5？

，如：

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

或者諸如此類的XPath，如果我有不同 DOM結構的多個分組：

<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>

來源

2013-07-11 Anderson

<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); 
    } 
});

DEMO

這應該爲你工作

來源

2013-07-11 09:50:16

謝謝，它確實有用！但是，如果有許多子菜單，我將不得不準備很多不同的CSS類。 – Anderson

嘿，爲此，你可以看看這個代碼示例http://jsfiddle.net/PTSkR/150/可能會爲你工作，如果你的問題得到解決，你可以請標記我的解決方案是正確的 –

我會做這樣的事情：

只需添加data-parent="< value of the parent >"任何孩子checkbox像：

<label class="checkbox"> 
    <input type="checkbox" value="A"> <b>Option A</b> 
</label> 
<label class="checkbox"> 
    <input type="checkbox" value="A1" data-parent="A"> Option A.1 
</label>

JsBin DEMO擁有所有代碼：http://jsbin.com/opexof/1

演示腳本註釋所以你可以看到發生了什麼，但總體思路是：

檢查，如果是孩子或父母
如果孩子們，看看有多少兄弟生存，以有多少兄弟被檢查
- 比較，如果數字匹配，選擇它的父
- 如果不是，未選擇的
如果是父母，請選擇所有孩子或不選擇，具體取決於您是選擇還是取消選擇父母。

希望它有效。

來源

2013-07-11 10:13:53 balexandre

不錯，但在一些複雜場景中，每個子組都有不同的DOM結構。我如何保持js代碼的可重用性？ – Anderson

更新了http://jsbin.com/opexof/1 – balexandre

這是一個明確的方式，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-11 14:27:28 Anderson

好像你有你的答案，但我會給你另一種變體，以防萬一：

//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-11 18:03:18 tree

對不起，它不滿足要求3.謝謝你們一樣！ – Anderson

構建「全選」複選框的最佳方法

回答

相關問題