【功能代码】---1.通过Jquery来处理复选框

来源：互联网发布：汽车金融软件编辑：程序博客网时间：2024/06/04 23:23

通过Jquery来处理复选框

实现以下功能：

1：选中第一个复选框，那么下面所有的复选框都选中，去除选中第一个复选框，下面的都不选中

2：当点击全选按钮，上面足球.篮球.游泳.唱歌全部选中

3：当点击全不选按钮，上面四个全部取消

4：当点击反选按钮，选中的变没有选中，没有选中变选中

<script type="text/javascript" src="jquery-1.8.2.min.js"></script>   //这个是文件，每一次都要看这段代码有没有写     </head>      <body>          <form method="post" action="" >              请选择你的爱好！              <br/>              <input type="checkbox" id="checkAll_2"/>全选/全不选<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="checkAll" value="全选"/>             <input type="button" id="checkNo" value="全不选"/>             <input type="button" id="checkRev" value="反选"/>                        <input type="button" id="send" value="提交"/>                   </form>                  <script type="text/javascript">              //全选          $("#checkAll").click(function(){                  //$中代表选中在input标签的前提下name属性为items标签，attr代表添加属性             $("input[name=items]").attr("checked","checked");            });                  //全不选          $("#checkNo").click(function(){                  //$中代表选中在input前提下type为checkbox，把checked为null代表不选中             $("input[type=checkbox]").attr("checked",null);           });         //反选         $("#checkRev").click(function(){            //也可以放多个属性，each这里代表迭代，迭代你选中的所有元素，因为这里满足条件的有四个             $("input[type=checkbox][name=items]").each(function(){                            if(this.checked){  //.checked可以用来判断该复选框是否被选中                   $(this).attr("checked",null);                }else{                  $(this).attr("checked","checked");                }                });         });             //全选/全不选         $("#checkAll_2").click(function(){            if(this.checked){  //这里代表如果选中，那么下面所有都选中               $("input[type=checkbox][name=items]").attr("checked","checked");            }else{            $("input[type=checkbox][name=items]").attr("checked",null);            }         });         </script>       </body>

思考：33行中的this.checked没有加$(),而34行this为什么加$符号？

理解：如果是this那就代表它是个dom对象，而当你加上$(this)那就说明这就是一个Juery对象。

而.checked是dom对象的方法，.attr是Juery对象的方法。所有当你以后当前对象需要用到dom对象方法就用this,要用Juery对象的方法就用$(this)

阅读全文

0 0