复选框在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”复选框下方所有复选框的功能。在复选框中没有任何常见操作，除了它们是复选框，并且我希望这些复选框只有其他才会出界。

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

感谢

编辑：

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 

}; 

要求：
功能应该工作在主选择所有子作为应选择，一旦主人是取消所有的孩子应该是取消选择，如果任何儿童复选框被取消选择，那么主人应该被取消选择，如果所有的孩子被选中，主人应该被选中automati凯莉

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所有复选框一旦你点击全选checkox &也取消选中他们，如果你删除检查。

此外，你可以自定义$('.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：仅供参考，我已经使用querySelector/querySelectorAll API导致更清洁节点&很好支持所有现代浏览器。它只是在旧版浏览器的IE6/IE7上不起作用。