複選框在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上不起作用。