jQuery操作checkbox实现全选和取消全选

作者: EverglowLyu | 来源:发表于2020-07-07 09:14 被阅读0次

jQuery操作checkbox实现全选和取消全选
jquery:实现checkbox全选和取消全选
zTree.js的使用
用jQuery实现全选和取消全选
html checkbox 实现全选/取消全选
ListView中CheckBox全选，取消全选，删除功能
jquery之checkbox全选（取消）
iview checkbox全选
js拖拽
checkbox全选和取消全选的效果实现

<style>
    body {
        margin: 0px;
    }

    input[type=checkbox],
    input[type=radio] {
        margin: 4px 0 0;
        margin-top: 1px\9;
        line-height: normal;
    }

    .questionListDiv {
        width: 1200px;
        margin: 0 auto;
    }

    .questionListTitle li {
        list-style: none;
        align-content: center;
        align-items: center;
        display: flex;
    }

    .checkLi input {
        margin: 0;
    }

    .questionListTitle {
        height: 50px;
        line-height: 49px;
        border-bottom: 1px solid #eee;
        text-align: left;
        padding: 0 30px;
        display: flex;
        align-items: center;
        align-content: center;
    }

    .checkLi,
    .checkTd,
    .unknown_checkLi,
    .unknown_checkTd {
        width: 2%;
    }

    .num,
    .numTd,
    .dialogueState,
    .dialogueTool {
        color: #7a8085;
        width: 8%;
    }

    .questionLi,
    .auditLi,
    .timeLi,
    .operatingLi,
    .auditTd,
    .timeTd,
    .operatingTd,
    .views,
    .dialogueTime {
        width: 22%;
        color: #7a8085;
    }

    .questionTd {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 21%;
        margin-right: 1%;
        color: #7a8085;
    }

    .allList {
        position: absolute;
        top: 50px;
        bottom: 45px;
        left: 0;
        right: 0;
        overflow: hidden;
        overflow-y: auto;
        width: 1200px;
        margin: 0 auto;
    }

    .questionDiv li {
        list-style: none;
        align-content: center;
        align-items: center;
    }

    .questionDiv {
        height: 50px;
        width: 100%;
        border-bottom: 1px solid #eee;
        padding: 0 30px;
        display: inline-block;
        display: flex !important;
        align-content: center;
        align-items: center;
    }

    .noPass {
        width: 44px;
        height: 26px;
        background: rgba(255, 230, 228, 1);
        border-radius: 4px;
        font-size: 12px;
        text-align: center;
        color: rgba(245, 34, 45, 1);
        line-height: 36px;
        padding: 3px 10px;
    }

    .pass {
        width: 44px;
        height: 26px;
        text-align: center;
        background: rgba(220, 245, 255, 1);
        border-radius: 4px;
        padding: 3px 10px;
        font-size: 12px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #009bdb;
        line-height: 36px;
    }

    .managementDiv .questionDiv:hover,
    .unknownDiv .questionDiv:hover,
    .unknowquestionDiv:hover {
        background: #dcf5ff !important;
        cursor: pointer;
    }

    .modifyQuestion {
        color: #009bdb;
        float: left;
        margin-right: 15px;
        cursor: pointer;
    }

    .delQuestion {
        color: #009bdb;
        float: left;
        margin-right: 15px;
        cursor: pointer;
    }

    .passQuestion {
        color: #009bdb;
        float: left;
        margin-right: 15px;
        cursor: pointer;
    }

    .pagePosition {
        position: absolute;
        text-align: right;
        background: #fff;
        color: #999;
        height: 47px;
        bottom: 0px;
        border-top: 1px solid #e3e4e9;
        display: flex;
        width: 100%;
        width: 1200px;
        margin: 0 auto;
        align-content: center;
        align-items: center;
        padding: 0px 30px;
        justify-content: flex-start;
    }


    .manageDel,
    .manageEnabled,
    .manageDisable {
        width: 62px;
        height: 30px;
        background: rgba(240, 240, 240, 1);
        border: 1px solid rgba(227, 228, 233, 1);
        border-radius: 3px;
        text-align: center;
        outline: none;
        font-size: 14px;
        color: rgba(153, 153, 153, 1);
        cursor: not-allowed !important;
        margin-right: 10px;
    }

    .manageDelState,
    .manageEnabledState,
    .manageDisableState {
        width: 62px;
        height: 30px;
        background: #fff;
        border: 1px solid rgba(0, 155, 219, 1);
        border-radius: 3px;
        text-align: center;
        outline: none;
        font-size: 14px;
        color: #009BDB;
        cursor: pointer !important;
        margin-right: 10px;
    }
</style>

<body>
    <!--问题管理列表-->
    <div class="questionListDiv">
        <div class="questionListTitle">
            <li class="checkLi">
                <input type="checkbox" class="selectAll" name="selectAllBtn" />
            </li>
            <li class="questionLi">问题</li>
            <li class="auditLi">更新时间</li>
            <li class="timeLi">当前状态</li>
            <li class="operatingLi">操作</li>
        </div>
        <div class="allList">
            <!--问题Div-->
            <div id="question1" class="questionDiv ">
                <li class="checkTd"><input type="checkbox" name="checkboxBtn"></li>
                <li class="questionTd">12112</li>
                <li class="timeTd">2020-06-28</li>
                <li class="auditTd"><span class="noPass">停用</span></li>
                <li class="operatingTd"><span class="modifyQuestion">编辑</span><span class="delQuestion">删除</span><span
                        class="passQuestion" style="display: inline-block;">启用</span></li>
            </div>
            <div id="question2" class="questionDiv ">
                <li class="checkTd"><input type="checkbox" name="checkboxBtn"></li>
                <li class="questionTd">12112</li>
                <li class="timeTd">2020-06-28</li>
                <li class="auditTd"><span class="noPass">停用</span></li>
                <li class="operatingTd"><span class="modifyQuestion">编辑</span><span class="delQuestion">删除</span><span
                        class="passQuestion" style="display: inline-block;">启用</span></li>
            </div>
            <div id="question3" class="questionDiv ">
                <li class="checkTd"><input type="checkbox" name="checkboxBtn"></li>
                <li class="questionTd">asfad</li>
                <li class="timeTd">2020-06-28</li>
                <li class="auditTd"><span class="pass">正常</span></li>
                <li class="operatingTd"><span class="modifyQuestion">编辑</span><span class="delQuestion">删除</span><span
                        class="passQuestion" style="display:inline-block;">停用</span></li>
            </div>
            <div id="question4" class="questionDiv ">
                <li class="checkTd"><input type="checkbox" name="checkboxBtn"></li>
                <li class="questionTd">asfad</li>
                <li class="timeTd">2020-06-28</li>
                <li class="auditTd"><span class="pass">正常</span></li>
                <li class="operatingTd"><span class="modifyQuestion">编辑</span><span class="delQuestion">删除</span><span
                        class="passQuestion" style="display:inline-block;">停用</span></li>
            </div>
        </div>
        <div class="pagePosition">
            <div class="btnAll">
                <input type="checkbox" class="selectAll" name="selectAllBtn">
                <button type="button" class="manageDel" disabled="disabled">删除</button>
                <button type="button" class="manageEnabled" disabled="disabled">启用</button>
                <button type="button" class="manageDisable" disabled="disabled">停用</button>
            </div>
        </div>
    </div>

</body>

<script>
    //问题管理全选
    function setItemCheckBox(flag) {
        $(":checkbox[name=checkboxBtn]").prop("checked", flag);
    }
    $(function () {
        //问题管理 全选
        $(".selectAll").click(function () {
            //1.获取全选的状态
            var flag = this.checked;//获取全选的状态
            if (flag) {
                $(this).prop("checked", true);
                $(".selectAll").prop("checked", true);
                $(".manageDel").attr("disabled", true).attr("class", "manageDelState")
                $('.questionDiv').css('background', '#dcf5ff');
                $(".manageDisableState").attr("disabled", true).attr("class", "manageDisable")
                $(".manageEnabledState").attr("disabled", false).attr("class", "manageEnabled")
            } else {
                $(this).prop("checked", false);
                $(".selectAll").prop("checked", false);
                $('.questionDiv').css('background', '#fff');
                $(".manageDelState").attr("disabled", true).attr("class", "manageDel")
                $(".manageDisableState").attr("disabled", true).attr("class", "manageDisable")
                $(".manageEnabledState").attr("disabled", false).attr("class", "manageEnabled")
            }
            setItemCheckBox(flag);
        });
        //给所有复选框添加事件
        $(":checkbox[name=checkboxBtn]").click(function () {
            var flagV = this.checked;
            if (flagV) {
                $(this).prop("checked", true);
                $(".manageDel").attr("disabled", false).attr("class", "manageDelState")
                $(this).parent().parent().css('background', '#dcf5ff');
                if ($(this).parent().nextAll().children("span.pass").text() == "正常") {
                    $(".manageDisable").attr("disabled", false).attr("class", "manageDisableState")
                }
                else if ($(this).parent().nextAll().children("span.noPass").text() == "停用") {
                    $(".manageEnabled").attr("disabled", false).attr("class", "manageEnabledState")
                }
            } else {
                $(this).prop("checked", false);
                $(this).parent().parent().css('background', '#fff');
                //$(".manageDelState").attr("disabled",true).attr("class","manageDel")
                $(".manageDisableState").attr("disabled", true).attr("class", "manageDisable")
                $(".manageEnabledState").attr("disabled", false).attr("class", "manageEnabled")
            }
            //获取所有复选框的个数
            var len = $(":checkbox[name=checkboxBtn]").length;
            //获取所有被选中的复选框的个数
            var checked_len = $(":checkbox[name=checkboxBtn]:checked").length;
            if (len == checked_len) {
                $(".selectAll").prop("checked", true);
                $(".manageDel").attr("disabled", true).attr("class", "manageDelState")
            } else if (checked_len == 0) {
                $(".selectAll").prop("checked", false);
                $(".manageDelState").attr("disabled", true).attr("class", "manageDel")
            } else {
                $(".selectAll").prop("checked", false);
            }
        });
        //问题管理点击启用停用
        $(".passQuestion").on('click', function () {
            if ($(this).text() == "启用") {
                $(this).text("停用")
                $(this).parent().parent().find('span.noPass').removeClass('noPass').addClass('pass').text("正常")
            }
            else if ($(this).text() == "停用") {
                $(this).text("启用")
                $(this).parent().parent().find('span.pass').removeClass('pass').addClass('noPass').text("停用")
            }
        })

    })
</script>

jQuery操作checkbox实现全选和取消全选
jquery:实现checkbox全选和取消全选
$('#check_all').click(function () { $("input[name='sub'...
zTree.js的使用
zTree.js的使用 zTree学习笔记一：实现checkbox、全选、取消全选功能
用jQuery实现全选和取消全选
全选取消全选 checkAll是全选按钮的id check是每个checkbox的class名 prop（）方法...
html checkbox 实现全选/取消全选
效果图：
ListView中CheckBox全选，取消全选，删除功能
在开发中接到一个功能要求在ListView中实现对CheckBox的全选，取消全选，删除的功能。先上图实现步骤：...
jquery之checkbox全选（取消）
开开心心写程序，然后就掉进坑里面了。今天准备写一点web的代码，然后选择了jquery作为前端js框架。在实现ch...
iview checkbox全选
需求：当点击全选checkbox时，所有列表商品选中，当列表商品中某一项取消时，全选checkbox变成半选(...
js拖拽
（1）原生js实现checkbox全选
checkbox全选和取消全选的效果实现
页面效果普通理解（一般思路）简易办法代码量少，理解简单去掉注释和无用代码的真实代码量简直就是精简的艺术品主...