jQuery Checkbox问题

Question

我一直在尝试创建一个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>

P.S：我在网上发现了这个代码。似乎是为其他人工作。

Answer 1

有很多问题。您正尝试根据类选择器设置复选框，但没有一个复选框具有该类。另外，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>

Answer 2

我想你在调用函数时错过了大括号......

 function toggleChecked(status)
    {
        $(document).ready(function(){
        $("#checkall").click(function(){
        var status = $(this).attr('checked');
        $('.checkbox').attr('checked',status);
        });
        });
     }

Answer 3

删除onclick并将其设为onchange

Answer 4

试试这个：

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

这会将click事件处理程序绑定到“load”上的#checkall元素，这就是你想要的，并从元素中取出javascript onclick（）方法。此外，您还需要为Select all元素添加和ID以使选择器起作用。

Answer 5

或者你可以这样做：

更改此

<input type="checkbox" />

到

<input type="checkbox" class="checkbox"/>

Answer 6

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

以下fiddle描述了这一点，尝试将布尔false更改为"false"，您就会理解。

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

Answer 7

检查link。这里工作正常。