jQurey实现checkbox反选的问题?

下面代码里全选效果、全不选效果都能实现,但反选就不行,不知道为什么?请高人指点!

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        form{
            width: 300px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <form>
        你爱好的运动是?<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="乒乓球">乒乓球
        <input type="button" id="CheckedAll" value="全选">
        <input type="button" id="CheckedNo" value="全不选">
        <input type="button" id="CheckedRev" value="反选">
        <input type="button" id="send" value="提交">
    </form>
    
    <script type="text/javascript" src="../jquery-3.2.1.js" ></script>
    <script type="text/javascript">
        var $items = $("[name=items]:checkbox");
        //实现全选
        $("#CheckedAll").click(function(){
            $items.prop("checked",true);
        });
        //实现全不选
        $("#CheckedNo").click(function(){
            $items.prop("checked",false);
        });

        // 实现反选,但是没有用,难道和jQuery版本有关?我的是3.2.1版
        var i=0;
        $("#CheckedRev").click(function(){
            for(i; i < $items.length; i++){
                $items[i].prop("checked", !($items[i].checked));
            }
        });
        
        //书上的实现反选的代码,可以用,但不明白我自己上面写的错在哪里?
        // $("#CheckedRev").click(function(){
        //     $items.each(function(){
        //         $(this).prop("checked",!$(this).prop("checked"));
        //     });
        // });
    </script>
</body>
</html>`
阅读 3.2k
4 个回答

题主应该是想知道自己错在哪里,那我就说下:

  1. i定义在了点击事件外面,是一个全局变量,当执行完 反选 的点击事件后i的值就一直是$items.length,所以无论你以后再怎么点击for后面代码块里的函数还是不会执行
  2. $items是一个jQuery的对象,$items[i]是DOM元素,prop是jQuery对象上的方法,所以这句话就是错的,其实只需要再在$items[i]用$包裹一下就行了
    还有不懂再来问

$items[i]不是一个jQuery对象了,所以无法调用jQuery的方法,如果你把它再转为jQuery对象,外面再加一个$(),这样包起来,就可以用你这样的代码了。
还有就是要把i在每次for循环开始都赋0初值,要不然只能反选一次。

$('#CheckedRev').on('click',function(){
    $items.each(function(){
        $(this).prop('checked',!$(this).prop('check'))
    });
});

$items.click(); 一行代码

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题