Question

我使用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>

我错过了什么是显而易见的？

Answer 1

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

Answer 2

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

显示或隐藏匹配的元素。

查看更新的小提琴：http://jsfiddle.net/o0bpdr53/12/

Answer 3

正如安东尼所说，使用.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/

Answer 4

我的解决方案如下：

        $('#checkAll').change(

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

感谢所有评论者。

jquery检查所有复选框

4 个答案: