1

我一直在尝试制作一个 jQuery 函数来选择所有附加到它的复选框。这是我一直在处理的代码。我究竟做错了什么？ 

<div id=checkboxes>
<input type="checkbox" onclick="toggleChecked(this.checked)"> Select / Deselect All<br>
<input type="checkbox" />Eggs<br>
<input type="checkbox" />Butter<br>
<input type="checkbox" />Milk<br>
<input type="checkbox" />Bread<br>
<input type="checkbox" />Jam<br>
<input type="checkbox" />Tea<br>
</div>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">                
         function toggleChecked(status)
            $(document).ready(function(){
            $("#checkall").click(function(){
            var status = $(this).attr('checked');
            $('.checkbox').attr('checked',status);
            });
            });
</script>

PS：我在网上找到了这段代码。似乎在为其他所有人工作。

4

7 回答 7

2

有很多问题。您正在尝试基于类选择器设置复选框，但没有一个复选框具有该类。此外，document.ready 函数在您的事件处理程序中，应该反过来......使用prop()方法而不是attr(). 并正确附加事件，例如：

<div id=checkboxes>
<input id="checkall" type="checkbox"> Select / Deselect All<br>
<input class="checkbox" type="checkbox" />Eggs<br>
<input class="checkbox" type="checkbox" />Butter<br>
<input class="checkbox" type="checkbox" />Milk<br>
<input class="checkbox" type="checkbox" />Bread<br>
<input class="checkbox" type="checkbox" />Jam<br>
<input class="checkbox" type="checkbox" />Tea<br>
</div>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">                

     $(document).ready(function(){
         $("#checkall").on("click", function(){
             var status = $(this).is(":checked");
             $('.checkbox').prop('checked', status);
         });
     });

</script>
于 2012-07-06T06:47:19.957 回答
1

删除onclick并制作onchange

于 2012-07-06T06:55:31.060 回答
1

我认为您在调用函数时缺少大括号...

 function toggleChecked(status)
    {
        $(document).ready(function(){
        $("#checkall").click(function(){
        var status = $(this).attr('checked');
        $('.checkbox').attr('checked',status);
        });
        });
     }
于 2012-07-06T06:45:34.700 回答
0

或者你可以这样做：

改变这个

<input type="checkbox" />

至

<input type="checkbox" class="checkbox"/>
于 2012-07-06T06:49:54.340 回答
0

由于某种原因，复选框的属性值"true"和布尔值true不同。同样"false"和布尔值false不同。

这是描述它的小提琴，尝试将 boolean 更改false为"false"，您会明白的。

在您的问题中，请确保您在状态变量中接收到布尔值。

于 2012-07-06T06:53:06.613 回答
0

尝试这个：

<div id=checkboxes>
<input type="checkbox" id="checkall"> Select / Deselect All<br>
<input type="checkbox" />Eggs<br>
<input type="checkbox" />Butter<br>
<input type="checkbox" />Milk<br>
<input type="checkbox" />Bread<br>
<input type="checkbox" />Jam<br>
<input type="checkbox" />Tea<br>
</div>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">                
            $(document).ready(function(){
              $("#checkall").click(function(){
                var status = $(this).attr('checked');
                $('input[type="checkbox"]').attr('checked',status);
              });
            });
</script>

这是将单击事件处理程序绑定到#checkall“加载”上的元素，这是您想要的，并从元素中取出 javascript onclick() 方法。您还需要在 Select all 元素中添加 ID 和 ID 才能使选择器正常工作。

于 2012-07-06T06:45:20.960 回答
-1

检查此链接。它在这里工作正常。

于 2012-07-06T06:54:50.437 回答