jquery最新版如何实现全选,不全选。

在学习锋利的jquery中,
当html结构内容相同的时候,我分别引入了旧版本jquery(书中的1.71版) 和最新版时遇到了一个问题。
总共有四个复选框,在旧版本jquery中,可以正常执行。
然而在新版本中,如果不去手动点击复选框改变选中状态,全选和不全选两个按钮都能正常工作;
当我手动点击复选框改变其状态,全选和不全选两个按钮对于我点击过的复选框都失灵了。只能手动点击复选框切换选中状态。

为什么会这样?有什么解决方法么? 谢谢。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
 <!--   引入jQuery -->
<script src="../../scripts/jquery.js" type="text/javascript"></script>
 <script type="text/javascript">
  $(function(){
     //全选
     $("#CheckedAll").click(function(){
         $('[name=items]:checkbox').attr('checked', true);
     });
     //全不选
     $("#CheckedNo").click(function(){
        $('[type=checkbox]:checkbox').attr('checked', false);
     });
     
  })

  </script>
</head>
<body>
<form method="post" action="">
   你爱好的运动是?
   <br/>
    <input type="checkbox" name="items" value="足球"/>足球
    <input type="checkbox" name="items" value="篮球"/>篮球
    <input type="checkbox" name="items" value="羽毛球"/>羽毛球
    <input type="checkbox" name="items" value="乒乓球"/>乒乓球
   <br/>
    <input type="button" id="CheckedAll" value="全 选"/>
    <input type="button" id="CheckedNo" value="全不选"/>

</form>
</body>
</html>
阅读 1.7k
1 个回答

改成这样

$("#CheckedAll").click(function(){
         $('[name=items]:checkbox').prop('checked', true);
     });
     //全不选
     $("#CheckedNo").click(function(){
        $('[type=checkbox]:checkbox').prop('checked', false);
     });
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题