zoukankan      html  css  js  c++  java
  • 关于checkbox的全选和反选实例

    <script type="text/javascript">
    $(function () {

    $("#checkAll").click(function () {//点击全选
    var allLength = $(":checkbox[id!='checkAll']").length; //复选框的个数
    var checkLength = $(":checkbox[id!='checkAll']:checked").length; //复选框被选中的个数
    if (allLength == checkLength) { //处于全选状态

    $(":checkbox[id!='checkAll']").each(function () {//所有选框依次取消
    $(":checkbox[id!='checkAll']").attr("checked", false);
    })

    }
    else {//不处于全选状态

    $(":checkbox[id!='checkAll']").each(function () {//所有选框依次选中
    $(this).attr("checked", $("#checkAll").attr("checked"));
    })
    }


    })
    $(":checkbox[id!='checkAll']").click(function () {//点击一个普通复选框
    var allLength = $(":checkbox[id!='checkAll']").length; //复选框的个数
    var checkLength = $(":checkbox[id!='checkAll']:checked").length; //复选框被选中的个数
    if (allLength == checkLength) { //处于全选状态

    $("#checkAll").attr("checked", true);//全选按钮选中

    }
    else {

    $("#checkAll").attr("checked", false);//全选按钮的非选中状态
    }
    })

    })

    </script>

    全选<input id="checkAll" name="checkAll" type="checkbox" />
    <table>
    <tr> <td>
    <input id="Checkbox0" name="CheckIt" type="checkbox" />
    </td>
    <td>选项一</td>
    </tr>
    <tr> <td>
    <input id="Checkbox1" name="CheckIt" type="checkbox" />
    </td>
    <td>选项二</td>
    </tr>
    <tr> <td>
    <input id="Checkbox2" name="CheckIt" type="checkbox" />
    </td>
    <td>选项三</td>
    </tr>
    <tr> <td>
    <input id="Checkbox3" name="CheckIt" type="checkbox" />
    </td>
    <td>选项四</td>
    </tr>
    </table>

  • 相关阅读:
    【原创】Zend Framework 2框架之MVC
    poj3101--Astronomy(分数的最小公倍数)
    【c语言】输入一个递增排序的数组的一个旋转,输出旋转数组中的最小元素
    Java中&、|、&&、||详解
    编写webpack 插件
    Babel 入门教程
    Eslint 规则说明
    npm模块之http-proxy-middleware使用教程(译)
    sass和less的几点不同
    babel的使用(关于使用async报错的问题)
  • 原文地址:https://www.cnblogs.com/fkcxy/p/5805647.html
Copyright © 2011-2022 走看看