添加复选框后的全选问题

maohaomaohaomao 2015-04-13 09:06:24

问题：当添加的复选框都被勾选时，全选框没有打勾，红色部分代码好像没有起作用，代码怎样改才能实现这个功能呢？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>jQuery实现CheckBox添加、全选、全不选</title>
<script src="http://code.jquery.com/jquery-1.4.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#add").click(function(){
$("<input type='checkbox' name='subBox'>").appendTo("#addto");
});
$("#checkAll").click(function() {
$(":checkbox").attr("checked",this.checked);
});
var $subBox = $("input[name='subBox']");
$subBox.click(function(){
$("#checkAll").attr("checked",$subBox.length ==$("input[name='subBox']:checked").length ? true : false);
});
});
</script>
</head>
<body>
<div id="addto">
<input id="checkAll" type="checkbox" />全选
</div>
<br/><input type="button" name="add" id="add" value="添加">
</body>
</html>

...全文

133 4 打赏收藏转发到动态举报

写回复

用AI写文章

4 条回复

切换为时间正序

请发表友善的回复…

发表回复

xiaoxiangqing 2015-04-14

打赏
举报

2楼的有个问题，就是加一个复选框，前面已经加的复选框又会重新绑定事件，这样事件就会有多个。理想状态是只绑定一次就行了。

forwardNow 2015-04-13

打赏
举报

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>jQuery实现CheckBox添加、全选、全不选</title>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-1.4.4.min.js" type="text/javascript"></script>    
<script type="text/javascript">
$(document).ready(function(){

  $("#add").click(function(){

    $("<input type='checkbox' name='subBox'>").appendTo("#addto");

    $("#checkAll").click(function() {
        $(":checkbox").attr("checked",this.checked);
    });

    var $subBox = $("input[name='subBox']");

     $subBox.click(function(){
      
      $("#checkAll").attr("checked",$subBox.length ==$("input[name='subBox']:checked").length ? true : false);

    });

  });

});
</script>
</head>
<body>
<div id="addto">
        <input id="checkAll" type="checkbox" />全选
</div>
<br/><input type="button" name="add" id="add" value="添加">
</body>
</html>

把所有的代码用“$("#add").click(function(){ });”包起来即可。

xiaoxiangqing 2015-04-13

打赏
举报

你写错了地方，改为下面就行了。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>jQuery实现CheckBox添加、全选、全不选</title> <script src="http://code.jquery.com/jquery-1.4.4.min_.js" type="text/javascript"></script> <script type="text/javascript" src="/JScript/jquery.js" charset="GB2312"></script> <script type="text/javascript"> $(document).ready(function () { $("#add").click(function () { $("<input type='checkbox' name='subBox'>").appendTo("#addto").click(function () { $("#checkAll").attr("checked", $("input[name='subBox']").length == $("input[name='subBox']:checked").length ? true : false); }); }); $("#checkAll").click(function () { $(":checkbox").attr("checked", this.checked); }); }); </script> </head> <body> <div id="addto"> <input id="checkAll" type="checkbox" />全选 </div> <br /> <input type="button" name="add" id="add" value="添加"> </body> </html>

maohaomaohaomao 2015-04-13