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>

显而易见的目标是设置一个复选框，允许我选中/取消选中所有其他复选框。

对于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

2 个答案: