checked 全选 反选 示例

Posted 2020-08-25 Mr. Ma

不多说看例子：

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

反选解决办法：

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