zoukankan      html  css  js  c++  java
  • 功能代码(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)

  • 相关阅读:
    【文献阅读】Densely Connected Convolutional Networks-best paper-CVPR-2017
    【文献阅读】Perceptual Generative Adversarial Networks for Small Object Detection –CVPR-2017
    Vue知识整理17:免终端开发vue应用
    Vue知识整理16:单文件组件
    Vue知识整理15:组件注册
    Vue知识整理14:组件基础
    Vue知识整理13:表单输入绑定(v-model)
    Vue知识整理12:事件绑定
    Vue知识整理11:列表渲染(v-for来实现)
    Vue知识整理10:条件渲染(v-if v-show)
  • 原文地址:https://www.cnblogs.com/qdhxhz/p/6252644.html
Copyright © 2011-2022 走看看