zoukankan      html  css  js  c++  java
  • jQuery应用操作之---复选框

    1、示例1:

    <form>
        你最爱好的运动是?
        <input type="checkbox" id="CheckedAll"/>全选<br/>
        <input type="checkbox" id="CheckedNo"/>全不选<br/>
        <input type="checkbox" id="CheckedRev"/>反选<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="send" value="提交"/>
    </form>

    全选:
    $("#checkAll").click(function(){
      $.("[name=items]: checkbox").attr("checked",true);
    })

    全不选:
    $("#checkAll").click(function(){
      $.("[name=items]: checkbox").attr("checked",false);
    })

    反选:
    $("#checkRev").click(function(){
      $.("[name=items]: checkbox").each(function(){
        $(this).attr("checked",!$(this).attr("checked"));
      })
    })
    JS原生的DOM方法比创建jQuery对象更为有效、简洁,简化后代码如下:
    $("#checkRev").click(function(){
      $.("[name=items]: checkbox").each(function(){
        this.checked=!this.checked;
      })
    })

    2、示例2:

    <form>
        你最爱好的运动是?
        <input type="checkbox" id="CheckedAll"/>全选/全不选<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="send" value="提交"/>
    </form>

    单击id为"CheckedAll"复选框后,复选框组被选中,当复选框组中有一个或者更多没有被选中时,则需要取消id为"CheckedAll"的选中状态,有如下方法实现:
    a)设置一个全选中/未全选中标志位,根据标志位设置"CheckedAll"复选框选中状态
      $("[name=items]:checkbox").click(function(){
        var flag = true;
        $("[name=items]:checkbox").each(function(){
          if(!this.checked){
            flag = false;
          }
        });
      $("#CheckAll").attr("checked",flag);
    })


    b) 判断复选框的总数是否与选中的复选框数量相等
    $("[name=items]:checkbox").click(function(){
      var $temp = $("[name=items]:checkbox");
      $("#CheckAll").attr("checked",$temp.length==$temp.filter(":checked").length);
    })

  • 相关阅读:
    spring注解实现业务层事务管理,当业务层自调用时,事务失效问题解决
    spring的事务
    maven创建web项目
    eclipse安装最新版svn
    .ncx文件剖析
    关闭MongoDB服务的几种方法
    mongodb添加验证用户 删除用户
    高性能kv存储之Redis、Redis Cluster、Pika:如何应对4000亿的日访问量?
    Python中msgpack库的使用
    彻底理解一致性哈希算法(consistent hashing)
  • 原文地址:https://www.cnblogs.com/hunterCecil/p/5664704.html
Copyright © 2011-2022 走看看