jQuery 复选框问题

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>