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

您可以查看fiddle demo

另一个选项

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

您可以查看fiddle demo

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 Fiddle demo

以上修改过以避免必须使用（简单）parentNode.parentNode垫片显式遍历DOM（使用顺序closest() ...需要预先了解HTML结构）：< / p>

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

参考文献：

Answer 5

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

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

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

选中所有复选框

5 个答案: