jQuery 复选框始终为 false

Question

首先我想说，我知道这个问题已经被问过很多次了，但我可以向你保证，我尝试了所有我能找到的答案，但都失败了。

所以首先我有一个 jQuery Datatable 看起来像这样（我正在使用 laravel 所以这就是为什么有这个 foreach）：

<table>
    <thead>
        <tr>
            <th id="head-cbx"><input type="checkbox" name="example"></th>
            <th id="head-xcode">XCODE</th>
        <tr>
    </thead>
    <tbody>
    @foreach($xcodes as $xcode)
        <tr>
            <td id="head-cbx"><input type="checkbox" class="xcode-cbx" name="xcodes[]"></td>
            <td>{{ $xcode }}</td>
        <tr>
    @endforeach
    </tbody>
</table>

最明显的 objective 是有一个复选框，允许我选中/取消选中所有其他复选框。

对于 jQuery 部分，我尝试了以下解决方案：

$(document).ready(function(){
    var headcbx = $('#head-cbx');
    headcbx.change(function(){
    if (headcbx.is(':checked')) {
            //uncheck all
        } else {
            //check all
        }
    });
}

然后

$(document).ready(function(){
    var headcbx = $('#head-cbx');
    headcbx.change(function(){
    if ($(this).is(':checked')) {
            //uncheck all
        } else {
            //check all
        }
    });
}

然后

$(document).ready(function(){
    var headcbx = $('#head-cbx');
    headcbx.change(function(){
    if (this.is(':checked')) {
            //uncheck all
        } else {
            //check all
        }
    });
}

然后我改变了我的测试

if (this.is(':checked'))...

至

if(this.checked)

然后到

if(this.prop('checked)

当然，每次我尝试变体

this
headcbx
$(this)
$('#head-cbx')

之后我尝试使用

$(document).on('change', '#head-cbx', function(){...})

具有我上面列出的所有相同变体。

无论如何，我总是得到相同的结果：false。所以我开始感到沮丧，我可以使用帮助，因为我想我在某处遗漏了一些明显的东西，但我似乎找不到它...

谢谢:)

Answer 1

您的选择器是错误的，因为 head-cbx 指的是 <TD> 元素而不是 checkbox 所以要么更改选择器

var headcbx = $('#head-cbx :checkbox');

注意：this.checked/$(this).is(':checked')/$(this).prop('checked) 会起作用

或者，修复 HTML

<th><input id="head-cbx" type="checkbox" name="example"></th>

Answer 2

问题在这里：

var headcbx = $('#head-cbx');

&

<td id="head-cbx">

您在事件侦听器中使用的 id 是 td，而不是复选框。所以将其更改为：

var headcbx = $('#head-cbx :checkbox');

jQuery 复选框始终为 false

jQuery checkbox always false

javascript

checkbox

jquery

datatables

laravel-5.4