選中所有複選框

Question

我創建了一個有很多複選框的表格，但現在我希望能夠使用「通用」複選框。

像這樣：

<tr> 
     <th scope="row">Indice</th> 
     <td><input type="checkbox" id="check1"></td> 
     <td><input type="checkbox" id="check2"></td> 
     <td><input type="checkbox" id="check3"></td> 
     <td><button onclick="check()">Check Checkbox</button> 
      <button onclick="uncheck()">Uncheck Checkbox</button></td> 
</tr> 

嗯，我已經這樣做了JavaScript的：

<script> 
function check() 
    { 
    document.getElementById("check1").checked=true 
    document.getElementById("check2").checked=true 
    document.getElementById("check3").checked=true 
    } 
function uncheck() 
    { 
    document.getElementById("check1").checked=false 
    document.getElementById("check2").checked=false 
    document.getElementById("check3").checked=false 
    } 
function selectAll(frmElement, chkElement) { 
    // ... 
} 
document.getElementById("check_all_1").onclick = function() { 
    selectAll(document.wizard_form, this); 
} 
</script> 

到目前爲止好......但是在IDEIA是有從一些成果數據庫，並沒有改變我正在做這個javascript「check3」，「check4」...我應該怎麼做？

Answer 1

簡單的純的JavaScript（無庫所需的）版本：

function checks(){ 
    var button = this.className.indexOf('uncheckAll') === -1, 
     row = this.parentNode.parentNode, 
     inputs = row.getElementsByTagName('input'); 

    for (var i = 0, len = inputs.length; i < len; i++) { 
     if (inputs[i].type == 'checkbox') { 
      inputs[i].checked = button; 
     } 
    } 

} 

var buttons = document.getElementsByTagName('button'); 
for (var i = 0, len = buttons.length; i < len; i++) { 
    buttons[i].addEventListener('click', checks); 
} 

JS Fiddle demo。

上述修正，以避免不必明確遍歷DOM（其中，使用順序parentNode.parentNode ...要求HTML結構的提前知識），使用一個（簡單）closest()墊片：

HTMLElement.prototype.closest = function (tagName) { 
    tagName = tagName.toLowerCase(); 
    var self = this, 
     selfTag = self.tagName.toLowerCase(); 
    return selfTag == tagName ? self : self.parentNode.closest(tagName); 
} 

function checks(){ 
    var button = this.className.indexOf('uncheckAll') === -1, 
     row = this.closest('tr'), 
     inputs = row.getElementsByTagName('input'); 

    for (var i = 0, len = inputs.length; i < len; i++) { 
     if (inputs[i].type == 'checkbox') { 
      inputs[i].checked = button; 
     } 
    } 

} 

var buttons = document.getElementsByTagName('button'); 
for (var i = 0, len = buttons.length; i < len; i++) { 
    buttons[i].addEventListener('click', checks); 
} 

JS Fiddle demo 。

參考文獻：

• document.getElementsByTagName()。
• Element.addEventListener()。
• Element.tagName。
• Node.parentNode。
• String.toLowerCase()。

Answer 2

試試這個

function selectAll(chkElement) { 
    checkboxes = document.getElementsByName('n'); 
    for(var checkbox in checkboxes) 
    checkbox.checked = chkElement.checked; 
} 

其中「N」是名

Answer 3

如果結果是從一個數據庫，當你循環通過數據庫結果並添加複選框該網頁只是做...

<td><input type="checkbox" checked /></td> 

另外，使s你用正斜槓終止標籤。

Answer 4

試試這個

<table> 
<tr> 
    <th scope="row"> 
     <input type="checkbox" id="checkAll" onclick="javascript: return CheckAllCheckboxes(this); "> 
    </th> 
    <tr> 
     <td> 
      <input type="checkbox" id="check1"> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <input type="checkbox" id="check2"> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <input type="checkbox" id="check3"> 
     </td> 
    </tr> 

JS

CheckAllCheckboxes = function (current) { 
    var state = $(current).is(':checked'); 
    $('input[type="checkbox"]').each(function() { 
     $(this).attr('checked', state); 
    }); 
}; 

您可以檢查fiddle demo

另一個選項

使用jQuery的單擊事件

$(':checkbox').not('#checkAll').change(function() { 
    $("#checkAll").attr("checked", $(":checkbox").not(":checked").not("#checkAll").length ? false : true); 
}); 
$("#checkAll").change(function() { 
    $(':checkbox').attr('checked', this.checked); 
}); 

您可以檢查fiddle demo

Answer 5

嘗試。它會像動態一樣工作。

<table> 
    <tr id="trCheck"> 
     <td> 
      <input type="checkbox" name="chk1" id="chk1"/> 
      <input type="checkbox" name="chk2" id="chk2"/> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <input type="button" name="btnSubmit" onclick="check();" value="Check/Uncheck" /> 
     </td> 
    </tr> 
</table> 


function check() { 

    if ($('#trCheck').find('[type="checkbox"]').attr('checked') == false) 
     $('#trCheck').find('[type="checkbox"]').attr('checked', true); 
    else 
     $('#trCheck').find('[type="checkbox"]').attr('checked', false); 

}