zoukankan      html  css  js  c++  java
  • 全选,反选

    <section class="order-list" id="pagination">
    <ul id="p1" class=" _current" >

    <li class="">
    <input type="checkbox" onclick="selectAll()">
    <label>李四</label>
    <span>799688123@qq.com</span>
    <a>详情</a>
    </li>
    <li class="">
    <input type="checkbox" onclick="selectAll()">
    <label>王武</label>
    <span>799688123@qq.com</span>
    <a>详情</a>
    </li>
    </ul>
    <ul id="p2" class=" " style="display: none;">
    <li class="">
    <input type="checkbox" onclick="selectAll()">
    <label>张三</label>
    <span>799688123@qq.com</span>
    <a>详情</a>
    </li>
    <li class="">
    <input type="checkbox" onclick="selectAll()">
    <label>李四</label>
    <span>799688123@qq.com</span>
    <a>详情</a>
    </li>
    </ul>
    <div class="all-send">
    <input type="checkbox" onclick="checkAll(this)" id="all">全选
    <a>发送</a>
    </div>
    </section>



    //全选,取消全选
    $("#checkall").click(
    function(){
    if(this.checked){
    $("input[name='user']").prop('checked', true);

    }else{
    $("input[name='user']").removeAttr("checked");
    }
    }
    );


    function checkAll(obj) {
    //alert(obj.checked);
    //获取name=box的复选框
    var userids = $(".order-list li input");
    //alert(userids.length);
    for (var i = 0; i < userids.length; i++) {
    userids[i].checked = obj.checked;
    }
    }

    function selectAll() {
    //获取name=box的复选框
    var userids = $(".order-list li input");
    var count = 0;
    //遍历所有的复选框
    for (var i = 0; i < userids.length; i++) {
    if (userids[i].checked) {
    count++;
    }
    }
    //选中复选框的个数==获取复选框的个数
    if (count == userids.length) {
    //设置id为all复选框选中
    document.getElementById("all").checked = true;
    } else {
    //设置id为all复选框不选中
    document.getElementById("all").checked = false;
    }

    }
  • 相关阅读:
    记忆化搜索——luogu滑雪
    如何解决mysql stop fail的问题
    顶级工程师谈机遇、谈跳槽、谈选择
    向周鸿祎学习产品和产品推销方法
    几个概念:x86、x86-64和IA-32、IA-64
    split函数的实现
    谈谈c++中继承中的虚函数
    c++ 编译期与运行期
    读<<大数据时代>>的一些感想
    size_t与size_type的使用
  • 原文地址:https://www.cnblogs.com/937522zy/p/7149431.html
Copyright © 2011-2022 走看看