Флажок выбора и отмены выбора в javascript

Question

У меня есть флажок «Выбрать все» на странице, который снимет выделение и установите флажки ниже.

<div class="field"> 
    <div class="SelectAllCheckBox"> 
     <input type="checkbox" id="SelectAllCheckBox" /> 
     <label for="SelectAllCheckBox">Select All</label> 
    </div> 
</div> 

<div id="TargetsPanel" class="panel" style="display: block;"> 
    <div class="body stack-calc"> 
     <table id="TargetsTable" class="tm-list" cellspacing="0"> 
      <colgroup> 
       <col width="20px"> 
       <col width="20%"> 
       <col> 
      </colgroup> 
      <thead> 
       <tr> 
       <th></th> 
       <th> Language </th> 
       <th> Workflow </th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr> 
        <td></td> 
        <td> 
         <span class="LanguageName">Arabic</span> 
         <ul class="Publications"> 
          <li> 
           <img alt="" src="/test/tt.png"> 
           <input type="checkbox" id="tcm:0-235-1" name="tcm:0-235-1" checked="checked">        
           <label for="tcm:0-235-1">Test Arabic</label> 
          </li> 
         </ul> 
        </td> 
        <td><select name="_1041" disabled=""><option value="1650">Test</option></select></td> 
       </tr> 
       <tr> 
        <td></td> 
        <td> 
         <span class="LanguageName">Test Chinese (HongKong)</span> 
         <ul class="Publications"> 
          <li> 
           <img alt="" src="/test/mm.png"> 
           <input type="checkbox" id="tcm:0-368-1" name="tcm:0-368-1" checked="checked">        
           <label for="tcm:0-368-1">Test (Traditional Chinese)</label> 
          </li> 
         </ul> 
        </td> 
        <td><select name="_1116" disabled=""><option value="1650">Test2</option></select></td> 
       </tr> 
       ... 
       ... 
       ...//It goes on for other checkboxes. 
       ... 
       ... 
      </tbody> 
     </table> 
    </div> 
</div> 

Теперь я хочу, чтобы иметь выбор и отмена выбора функции на «SelectAllCheckBox» флажок ниже для всех флажков. Нет ничего общего в checkbox для выполнения сопоставления, за исключением того, что они являются флажками, и я хочу, чтобы эти флажки только другие были не связаны.

<input type="checkbox" id="tcm:0-235-1" name="tcm:0-235-1" checked="checked"> 
<input type="checkbox" id="tcm:0-368-1" name="tcm:0-368-1" checked="checked"> 
.... 
.... 
.... 

Благодаря

EDIT:

c.SelectAllCheckBox = $("#SelectAllCheckBox"); //I am initializing the existing checkbox id 

$evt.addEventHandler(c.SelectAllCheckBox, "click", this.getDelegate(this._onSelectAllCheckBoxClick)); //Here I am adding the event listner 

TranslationJob.prototype._onSelectAllCheckBoxClick = function TranslationJob$_onSelectAllCheckBoxClick(headDoc, items) 
{ 
    var p = this.properties; 
    var c = p.controls; 

    //Here I want code which will deselect and select the checkboxes 

}; 

Обязательно:
функциональность должна работать, когда мастер выбран весь ребенок должен быть выбран, когда мастер выключенной все ребенок должен быть отменен, а также если какой-либо из дочерних флажков отменен, то мастер следует отменить, а также, если все дочерние элементы выбраны, мастер должен быть выбран автоматически чески

Answer 1

чистое решение javascript :)
скрипка: http://jsfiddle.net/6sxxZ/6/

function get_checkboxes() { 
    var cboxes = []; 
    var tbl = document.getElementById('TargetsTable'); 
    var tbody = tbl.getElementsByTagName('tbody')[0]; 
    var trs = tbody.getElementsByTagName('tr'); 
    var cbox; 
    for (var i = 0; i < trs.length; i++) { 
     cboxes.push(cbox = trs[i].getElementsByTagName('input')[0]); 
    } 
    return cboxes; 
} 

var _cboxes = get_checkboxes(); 
for (var i = 0; i < _cboxes.length; i++) { 
    _cboxes[i].onchange = function() { 

     var __cboxes = get_checkboxes(); 
     var all_checked = true; 
     for (var j = 0; j < __cboxes.length; j++) { 

      if (!__cboxes[j].checked) { 
       all_checked = false; 
       break; 
      } 
     } 

     document.getElementById('SelectAllCheckBox').checked = all_checked; 
    } 
}; 

document.getElementById('SelectAllCheckBox').onchange = function() { 
    var cboxes = get_checkboxes(); 
    for (var i = 0; i < cboxes.length; i++) { 
     cboxes[i].checked = this.checked; 
    } 
}; 

Answer 2

JQuery решение:
редактировать: оригинальный вопрос принял решение Jquery
скрипку: http://jsfiddle.net/WF74Y/3/

$('#SelectAllCheckBox').change(function() { 
    $('div#TargetsPanel table#TargetsTable tr input[type="checkbox"]').prop('checked', $(this).prop('checked')); 
}); 

Answer 3

Попробуйте это:

$(document).on('click', '#SelectAllCheckBox', function(){ 
    $('.Publications input[type=checkbox]').toggle(this.checked); 
}); 

было бы проверить все флажки, которые имеют class=Publications как только вы нажмете кнопку «Выбрать все» & также снимите флажок их, если вы удалите чек.

Кроме того, вы можете настроить $('.Publications input[type=checkbox]') селектор вашей воли, чтобы изменить то, что флажки проверяются/непроверенной

[править]

для чистого раствора JavaScript см my other answer

Answer 4

Чистый раствор Javascript

var selectAll = document.querySelector('#SelectAllCheckBox'); 

function checkUncheck() { 
    var checkboxes = document.querySelectorAll('.Publications input[type=checkbox]'); 
    for (var checkbox in checkboxes) { 
     if (!checkboxes.hasOwnProperty(checkbox)) continue; 
     if (selectAll.checked) { 
      checkboxes[checkbox].checked = true; 
     } else { 
      checkboxes[checkbox].checked = false; 
     } 
    } 
} 

function uncheck(){ 
    selectAll.checked = false; 
} 

теперь нам нужно добавить эти две функции к событию.Я выбираю использовать встроенные события & его сделали таким образом:

1. Добавить onclick обратного вызова для вызова checkUncheck() к #SelectAllCheckBox

2. Добавить onclick обратного вызова для вызова uncheck все остальные флажки

вы можете использовать unobtrusive javascript & Добавить EventHandlers, чтобы сделать то же самое.

Вот Jsfiddle, чтобы показать его работу:

• jsfille demo

Надеется, что это помогает

PS: FYI, я использовал querySelector/querySelectorAll API приводит к гораздо более чистому узлу & хорошо поддерживается во всех современных браузерах. он просто не работает на IE6/IE7, которые являются устаревшими браузерами.