猿问

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>


小怪兽爱吃肉
浏览 520回答 1
1回答

SMILET

改成这样$("#CheckedAll").click(function(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;$('[name=items]:checkbox').prop('checked', true);&nbsp; &nbsp; &nbsp;});&nbsp; &nbsp; &nbsp;//全不选&nbsp; &nbsp; &nbsp;$("#CheckedNo").click(function(){&nbsp; &nbsp; &nbsp; &nbsp; $('[type=checkbox]:checkbox').prop('checked', false);&nbsp; &nbsp; &nbsp;});
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答