Лучший способ установить флажок «выбрать все»

Question

У меня есть флажок «Выбрать все» (A) и некоторые другие связанные с ним (B).

Я надеюсь:

1. Когда А к зарегистрированному или нет, сделать все B такой же, как А.
2. Когда все B к зарегистрированному, сделать к зарегистрированному.
3. Если не все проверенные 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> 

Answer 1

<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

Это должно работать для вас

Answer 2

Я хотел бы сделать что-то вроде этого:

просто добавить 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

---

Демонстрационный сценарий комментировал чтобы вы могли видеть, что происходит, но общая идея:

• проверить, если это дети или родитель
• если дети, посмотрят, сколько братий существуют и сравнить с тем, как многими братьями проверяются
  • если номера совпадают, выберите его родители
  • если нет, невыбранных
• Если это родительский элемент, выберите всех детей или нет, если вы выбираете или не выбираете родителя.

Надеюсь, он сработает.

Answer 3

Вот ясный путь, 4 CSS классы для флажков:

• family, parent, child для отношений,

• и invalid для статуса.

Проверка parent средства выбрать все действительные флажков в семье. Он поддерживает вложенные семьи.

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

Answer 4

кажется, если у вас есть свой ответ, но я дам вам еще один вариант на всякий случай:

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