zoukankan      html  css  js  c++  java
  • jquery实现全选/反选功能

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>多选框全选/反选</title>
    <script src="http://res01.xesimg.com/jquery/jquery.min.js"></script>
    </head>
    <body>
    <div class="demo">
    <ul id="list">
    <li><label><input type="checkbox" value="1"> 1.时间都去哪儿了</label></li>
    <li><label><input type="checkbox" value="2"> 2.海阔天空</label></li>
    <li><label><input type="checkbox" value="3"> 3.真的爱你</label></li>
    <li><label><input type="checkbox" value="4"> 4.不再犹豫</label></li>
    <li><label><input type="checkbox" value="5"> 5.光辉岁月</label></li>
    <li><label><input type="checkbox" value="6"> 6.喜欢妳</label></li>
    </ul>
    <input type="checkbox" id="all">
    <input type="button" value="获得选中的所有值" class="btn" id="getValue">
    </div>

    </body>
    </html>
    <script type="text/javascript">
    //全选或全不选
    $("#all").click(function(){
    console.log(this.checked)
    if(this.checked){
    $("#list :checkbox").prop("checked", true);
    }else{
    $("#list :checkbox").prop("checked", false);
    }
    });
    //设置全选复选框
    $("#list :checkbox").click(function(){
    allchk();
    });
    //获取选中选项的值
    $("#getValue").click(function(){
    var valArr = new Array;
    $("#list input[type=checkbox]:checked").each(function(i){
    valArr[i] = $(this).val();
    });
    var vals = valArr.join(',');
    alert(vals);
    });
    function allchk(){
    var chknum = $("#list :checkbox").size();//选项总个数
    var chk = 0;
    $("#list :checkbox").each(function () {
    if(this.checked){
    chk++;
    }
    });
    if(chknum==chk){//全选
    $("#all").prop("checked", true);
    }else{//不全选
    $("#all").prop("checked", false);
    }
    }
    </script>

  • 相关阅读:
    Cgroup学习笔记
    基于dubbo框架下的RPC通讯协议性能测试
    More about dubbo
    基于nginx tomcat redis分布式web应用的session共享配置
    基于开源Dubbo分布式RPC服务框架的部署整合
    More about Tair (NoSql)
    MySql Replication配置
    Memcached、Redis OR Tair
    基于淘宝开源Tair分布式KV存储引擎的整合部署
    关于TbSchedule任务调度管理框架的整合部署
  • 原文地址:https://www.cnblogs.com/dearxinli/p/6815052.html
Copyright © 2011-2022 走看看