• checked 全选 反选 示例


    不多说看例子:

    右上侧全选,然后每个栏又有一个栏目全选。

    反选解决办法:

    function selectSubscibe(_class) {
            $("." + _class + " input[type='checkbox']").each(function() {
                this.checked = !this.checked;
            })
        }

    onclick="selectSubscibe('zhuanxiang')"函数内传入子类的class即可完成反选功能!

    全选功能:

    function selectSubscibe(_this,_class) {
            if(_this.checked){
                $("." + _class + " input[type='checkbox']").each(function() {
                    this.checked = true;
                })
            }else{
                $("." + _class + " input[type='checkbox']").each(function() {
                    this.checked = false;
                })
            }
            
        }

    把当前对象传进来,接下来的都能看懂。

    JSP部分源码:

        <div class="col-md-9 pd-lt-clear bd-lt">
                    <div class="center-cont">
                        <fieldset>
                            <legend>我的订阅</legend>
                            <div class="cont-opt">
                                <label>
                                    <input type="checkbox" onclick="selectSubscibe(this,'quanxuan')" value="" name="">
                                    全选所有信息栏目
                                </label>
                            </div>
                            <table  class="table table-bordered table-hover table-sm quanxuan">
                                <thead>
                                    <tr>
                                        <th>
                                            <label>
                                                <input type="checkbox" onclick="selectSubscibe(this,'yanjiu')" class="yanjiudongtai" value="" name="">
                                                研究动态
                                            </label>
                                        </th>
                                        <th>
                                            <label>
                                                <input type="checkbox" onclick="selectSubscibe(this,'redian')" value="" name="">
                                                热点追踪
                                            </label>
                                        </th>
                                        <th>
                                            <label>
                                                <input type="checkbox" onclick="selectSubscibe(this,'qingbao')" value="" name="">
                                                情报发现
                                            </label>
                                        </th>
                                        <th>
                                            <label>
                                                <input type="checkbox" class="one" onclick="selectSubscibe(this,'zhuanxiang')" value="" name="">
                                                专项进展
                                            </label>
                                        </th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <form action="${path }/accountSubscibe" method="post" id="form1">
                                        <tr>
                                            <td class="yanjiu">
                                                <p>
                                                    <label>
                                                        <input type="checkbox"  value="lunwen" name="subscibes">
                                                        论文
                                                    </label>
                                                </p>
                                                <p>
                                                    <label>
                                                        <input type="checkbox"  value="zhuanli" name="subscibes">
                                                        专利
                                                    </label>
                                                </p>
                                                <p>
                                                    <label>
                                                        <input type="checkbox"  value="xinyao" name="subscibes">
                                                        新药
                                                    </label>
                                                </p>
                                                <p>
                                                    <label>
                                                        <input type="checkbox"  value="jiangxiang" name="subscibes">
                                                        奖项
                                                    </label>
                                                </p>
                                            </td>
                                            <td class="redian">
                                                <p>
                                                    <label>
                                                        <input type="checkbox" value="zhengce" name="subscibes">
                                                        政策
                                                    </label>
                                                </p>
                                                <p>
                                                    <label>
                                                        <input type="checkbox" value="yanfa" name="subscibes">
                                                        研发
                                                    </label>
                                                </p>
                                                <p>
                                                    <label>
                                                        <input type="checkbox" value="shichang" name="subscibes">
                                                        市场
                                                    </label>
                                                </p>
                                            </td>
                                            <td class="qingbao">
                                                <p>
                                                    <label>
                                                        <input type="checkbox" value="jianbao" name="subscibes">
                                                        简报
                                                    </label>
                                                </p>
                                                <p>
                                                    <label>
                                                        <input type="checkbox" value="zhuanliditu" name="subscibes">
                                                        专利地图
                                                    </label>
                                                </p>
                                                <p>
                                                    <label>
                                                        <input type="checkbox" value="taishibaogao" name="subscibes">
                                                        态势报告
                                                    </label>
                                                </p>
                                                <p>
                                                    <label>
                                                        <input type="checkbox" value="wenxianqingbaofuwu" name="subscibes">
                                                        文献情报服务
                                                    </label>
                                                </p>
                                            </td>
                                            <td class="zhuanxiang">
                                                <p>
                                                    <label>
                                                        <input type="checkbox" class="DaysNew" value="xinwen" name="subscibes">
                                                        新闻
                                                    </label>
                                                </p>
                                                <p>
                                                    <label>
                                                        <input type="checkbox" class="DaysNew" value="tongzhitonggao" name="subscibes">
                                                        通知通告
                                                    </label>
                                                </p>
                                                <p>
                                                    <label>
                                                        <input type="checkbox" class="DaysNew" value="zhuanxiangguanli" name="subscibes">
                                                        专项管理
                                                    </label>
                                                </p>
                                            </td>
                                        </tr>
                                    </form>
                                </tbody>
                            </table>
                            <div class="opt text-center">
                                <button type="submit" class="btn btn-accept">订阅</button>
                                <button type="reset" class="btn btn-default">全部退订</button>
                            </div>
                        </fieldset>
                    </div>
                </div>
    View Code
  • 相关阅读:
    JDK7与JDK8环境共存与切换:先安装jdk7,配置好环境变量后再安装jdk8
    Maven环境配置
    JDK的安装
    Access2010打开系统表MSysObjects的控制权限
    Spring aop 简单示例
    redis集群搭建
    springmvc中拦截器与springmvc全局异常处理器的问题
    自定义springmvc统一异常处理器(实现HandlerExceptionResolver接口)不起作用的一种情况
    一句SQL实现MYSQL的递归查询
    2002年的决战坦克,重新玩一遍。qq群号:1035127306
  • 原文地址:https://www.cnblogs.com/blog411032/p/6223200.html
Copyright © 2020-2023  润新知