javascript - 选中所有复选框

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" ... 我应该怎么做？

score 3 · Accepted Answer

试试这个

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

其中“n”是名称

score 2 · Accepted Answer

试试这个

<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 点击事件

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

您可以查看小提琴演示

score 1 · Accepted Answer

试试这个。它会像我们一样动态地工作。

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

 }

score 1 · Accepted Answer

一个简单的纯 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 小提琴演示。

上面的修改是为了避免必须显式遍历 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 小提琴演示。

参考：

score 0 · Accepted Answer

如果结果来自数据库，当您循环浏览数据库结果并将复选框添加到页面时，只需执行...

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

此外，请确保使用正斜杠终止标记。

javascript - 选中所有复选框

5 回答 5

Related

Reference