zoukankan      html  css  js  c++  java
  • Html checkbox全选

    html中全选

    <table class="data-table td-center">
                                 <tr>
                                    <td><input type="checkbox" id="ckAll" name="checkAll"  />全选</td>
                                    <td>编号</td>
                                    <td>姓名</td>
                                    <td>班级</td>
                                    <td>年龄</td>
                                    <td>邮箱</td>
                                    <td>操作</td>
                                 </tr>
                                 <tr>
                                    <td><input type="checkbox" name="checkItem" onclick="checkOne(this)"/></td>
                                    <td>1</td>
                                    <td>张三</td>
                                    <td>2班</td>
                                    <td>12</td>
                                    <td>zs@qq.com</td>
                                    <td><a href='javascript:void(0);'>删除</a></td>
                                </tr>
                                <tr>
                                    <td><input type="checkbox" name="checkItem" onclick="checkOne(this)" /></td>
                                    <td>2</td>
                                    <td>李四</td>
                                    <td>1班</td>
                                    <td>11</td>
                                    <td>ls@qq.com</td>
                                    <td><a href='javascript:void(0);'>删除</a></td>
                                </tr>
                            </table>

    jquery 代码

     $(document).ready(function () {
                $("input[name=checkAll]").click(function () {
                    if (this.checked)
                        $("input[name=checkItem]").prop("checked", true);
                    else
                        $("input[name=checkItem]").prop("checked", false);
                });
    
                $("#ckAll").click();
            })
    
    
            function checkOne(ths) {
                if (ths.checked == false)
                    $("input[name=checkAll]").prop("checked", false);
                else {
                    var count = $("input[name=checkItem]:checkbox:checked").length;
                    if (count == $("input[name=checkItem]:checkbox").length) {
                        $("input[name=checkAll]").prop("checked", true);
                    }
                }
            }
  • 相关阅读:
    SQLSERVER 远程登录18456错误
    谁用掉了我的数据库空间?
    Zabbix-微信报警
    Mailx安装与使用
    Redis-集群操作
    Redis-集群部署
    十、Zabbix-自动关联模板
    九、Zabbix-触发器
    八、Zabbix-应用集、监控项
    七、Zabbix-模板,应用集,监控项,触发器
  • 原文地址:https://www.cnblogs.com/ZJ199012/p/10469678.html
Copyright © 2011-2022 走看看