Question

我有一个复选框，它将调用下面给出的jquery函数来检查页面中的所有复选框：

//to check all checkbox
$(document).ready(function () {
    $("#checkAll").click(function () {
        $("input:checkbox").prop('checked', $(this).prop('checked'));
    });
});

但是当我点击下面的“Select All”文本时我也想调用相同的jquery函数，但是它不起作用：

<input type="checkbox" id="checkAll" /> 
<a id="checkAll" onclick="document.getElementById('checkAll').checked=true" style="cursor:pointer"> Select All </a>

Answer 1

已更新：

ID无法在文档中分配两次！ ID是选择元素的Unique Key，如果要一次选择两个元素，则必须使用class！

<input type="checkbox" class="checkAll" /> 
<a class="checkAll" onclick="document.getElementsByClassName('checkAll')[0].checked=true" style="cursor:pointer"> Select All </a>

或解决问题的另一种方式是使用Label标记并将input:checkbox打包到其中，例如

<label>
<input type="checkbox" class="checkAll" /> 
Select All
</label>

Answer 2

从id中删除重复的<a>和内联js后，您可以使用jQuery之类的

$(document).ready(function () {
  $("#checkAll, #checkAll + a").click(function(){
    var checked =  $("#checkAll").prop('checked');
    if(this.id=="checkAll")
      $(":checkbox").prop('checked', checked );
    else
      $(":checkbox").prop('checked', !checked );
  });
});

Answer 3

您不能在同一页面中放置具有相同ID的两个元素。 Ids被认为是独一无二的。

此外，您正在混合使用jQuery代码和内联事件处理程序。试试这个：

    <input type="checkbox" id="checkAll" class="checkAll"/> 
    <a class="checkAll" style="cursor:pointer"> Select All </a>

的javascript：

//to check all checkbox
$(document).ready(function () {
    $(".checkAll").click(function () {
        var checkbox = $('#checkAll');
        if (this.id !== 'checkAll') checkbox.prop('checked', true);
        var checked = checkbox.prop('checked');
        $("input:checkbox").prop('checked', checked);
    });
});

Answer 4

在HTML中，为两个不同的元素提供相同的ID是非法的。为标记提供与输入标记不同的ID：

<input type="checkbox" id="checkAll" /> 
<a id="btnCheckAll" onclick="document.getElementById('checkAll').checked=true" style="cursor:pointer"> Select All </a>

然后你可以将jQuery代码更改为：

//to check all checkbox
$(document).ready(function () {
    $("#checkAll #btnCheckAll").click(function () {
        $("input:checkbox").prop('checked', $(this).prop('checked'));
    });
});

顺便说一下 - 看起来这段代码似乎并不打算总是检查所有Checkbox，而是翻转它们的值。

如何通过单击复选框或其文本来检查所有复选框

4 个答案: