選中所有復選框

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>

到目前為止，一切都很好。。。但是，我的主意是要從數據庫中獲得一些結果，並且沒有任何變化，我正在執行此JavaScript“ check3”，“ check4” ...我應該怎么做？

Answer 1

嘗試這個

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

其中“ n”是名字

Answer 2

嘗試這個

<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);
   });
};

您可以查看小提琴演示

另外一個選項

使用jQuery click事件

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

您可以查看小提琴演示

Answer 3

嘗試這個。 它會像我們一樣動態地工作。

<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);

 }

Answer 4

一個簡單的普通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小提琴演示 。

對上述內容進行了修正，以避免使用（簡單的） closest()墊片來顯式遍歷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小提琴演示 。

參考文獻：

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

Answer 5

如果結果來自數據庫，則在遍歷數據庫結果並將復選框添加到頁面時，只需執行以下操作即可...

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

另外，請確保以正斜杠終止標記。