jquery检查所有复选框答案

【问题标题】：jquery check all checkboxesjquery检查所有复选框
【发布时间】：2014-08-15 13:51:42
【问题描述】：

我使用jquery select all checkboxes 来尝试检查所有复选框按钮。使用此答案中的代码，我的按钮会立即消失，如 Fiddle

所示

JS：

$(function(){

    $('#checkAll').toggle(
            function(){
                    $('#numberList .numberClass').prop('checked',true);
            },
            function(){
                    $('#numberList .numberClass').prop('checked',false);
            });
});

HTML：

 <div id='numberList'>
 <table>
<tr>
<th>
    <input type='button' id='checkAll' name='checkAll' value='Check All'>
    </td>
</tr>
<tr>
<td>
    <input class='numberClass' type='checkbox' id='number[" . $k . "]' name='number[" . $k . "]'>
</td>
</tr>
<tr>
<td>
    <input class='numberClass' type='checkbox' id='number[" . $k . "]' name='number[" . $k . "]'>
</td></tr>
 </table>
 </div>

我错过了什么如此明显？

【问题讨论】：

试试$('#checkAll').click(

标签： jquery html checkbox

【解决方案1】：

.toggle(function, function) 版本（即事件处理方面）在 jQuery 1.9 中被删除，如documentation 中所述。因此，它将它视为另一个 .toggle() 方法，用于切换一组元素的可见性 - 因为它设置为在 HTML 和 CSS 中可见，所以 jQuery 将其切换为不可见。

【讨论】：

啊，那是我正在使用的旧帖子。谢谢。将在 9 分钟内接受。

【解决方案2】：

您确定toggle() 功能吗？ jQuery 文档中的描述明确指出：

显示或隐藏匹配的元素。

查看更新后的 Fiddle：http://jsfiddle.net/o0bpdr53/12/

【讨论】：

我有点想投反对票，只是因为使用 0 和 1 在支持布尔 true 和 false 值的语言中跟踪布尔状态...使用实际的布尔值你可以完全摆脱if 声明：jsfiddle.net/o0bpdr53/14

【解决方案3】：

正如 Anthony 所说，以您在这里的方式使用 .toggle 在 jQuery 1.8 中已被弃用，并在 1.9 中被删除。 .toggle 现在切换元素可见性，这就是您看到按钮消失的原因。

阅读the source for the now-removed .toggle in jQuery 1.8 可以提供解决此问题的线索。避免全局变量的一种方法是使用.data() 来存储复选框的当前状态：

$('#checkAll').click(
    function () {
        var currentlyChecked = $(this).data('checked') || false,
            shouldBecomeChecked = !currentlyChecked;

        $('#numberList .numberClass').prop('checked', shouldBecomeChecked);

        $(this).data('checked', shouldBecomeChecked);
    }
);

http://jsfiddle.net/o0bpdr53/15/

【讨论】：

【解决方案4】：

我的解决方案如下：

        $('#checkAll').change(

            function(){
                    if ($(this).prop('checked')){
                            var status = true;
                    }
                    else{
                            var status = false;
                    }
                            $('.numberClass').prop('checked',status);
            });

感谢所有的评论者。

【讨论】：