功能代码(1)---通过Jquery来处理复选框

2年前 (2022) 程序员胖胖胖虎阿
256 0 0

功能代码(1)---通过Jquery来处理复选框

实现以下功能:

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

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

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

   4:当点击反选按钮,选中的变没有选中,没有选中变选中

 1     <script type="text/javascript" src="jquery-1.8.2.min.js"></script>   //这个是文件,每一次都要看这段代码有没有写
 2    </head>
 3     <body>
 4         <form method="post" action="" >
 5             请选择你的爱好!
 6             <br/>
 7             <input type="checkbox" id="checkAll_2"/>全选/全不选<br/>
 8             <input type="checkbox" name="items" value="足球"/>足球
 9             <input type="checkbox" name="items" value="篮球"/>篮球
10             <input type="checkbox" name="items" value="游泳"/>游泳
11             <input type="checkbox" name="items" value="唱歌"/>唱歌
12             <br/>
13             <input type="button" id="checkAll" value="全选"/>
14             <input type="button" id="checkNo" value="全不选"/>
15             <input type="button" id="checkRev" value="反选"/>           
16             <input type="button" id="send" value="提交"/>          
17         </form>
18         
19         <script type="text/javascript">   
20           //全选
21          $("#checkAll").click(function(){
22             $("input[name=items]").attr("checked","checked");  //$中代表选中在input标签的前提下name属性为items标签,attr代表添加属性
23          });
24         
25         //全不选
26          $("#checkNo").click(function(){
27             $("input[type=checkbox]").attr("checked",null); //$中代表选中在input前提下type为checkbox,把checked为null代表不选中
28          });
29         //反选
30         $("#checkRev").click(function(){
31             $("input[type=checkbox][name=items]").each(function(){ //也可以放多个属性,each这里代表迭代,迭代你选中的所有元素,因为这里满足条件的有四个
32               
33                if(this.checked){  //.checked可以用来判断该复选框是否被选中
34                   $(this).attr("checked",null);
35                }else{
36                  $(this).attr("checked","checked");
37                }   
38             });
39         });    
40         //全选/全不选
41         $("#checkAll_2").click(function(){
42            if(this.checked){  //这里代表如果选中,那么下面所有都选中
43               $("input[type=checkbox][name=items]").attr("checked","checked");
44            }else{
45            $("input[type=checkbox][name=items]").attr("checked",null);
46            }
47         });
48         </script>    
49   </body>

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

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

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

版权声明:程序员胖胖胖虎阿 发表于 2022年9月8日 下午11:00。
转载请注明:功能代码(1)---通过Jquery来处理复选框 | 胖虎的工具箱-编程导航

相关文章

暂无评论

暂无评论...