监测checkbox复选框选中个数,可指定数目

Posted MorningKit

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了监测checkbox复选框选中个数,可指定数目相关的知识,希望对你有一定的参考价值。

需求:提供6个坦克可供选择,只允许用户选择3个坦克

解决思路:监控checkbox复选框的选中个数,可取消选择,数额达到指定数量,禁止再选,选完也可取消

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <title>6选3</title>
    <script src="https://cdn.bootcss.com/jquery/3.5.0/jquery.js"></script>
</head>
<style>
    @charset "UTF-8";

    blockquote,
    body,
    button,
    dd,
    dl,
    dt,
    fieldset,
    form,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    hr,
    input,
    legend,
    ol,
    p,
    pre,
    td,
    textarea,
    th,
    ul {
        margin: 0;
        padding: 0;
    }

    body {
        font: 14px "Microsoft Yahei", Arial, Helvetica, sans-serif;
        color: #fff;
        background: #030c20;
    }

    a {
        text-decoration: none;
    }

    ul,
    ul {
        list-style: none;
    }

    img {
        border: 0;
    }

    button,
    input,
    select,
    textarea {
        border: none;
        outline: none;
    }

    table {
        border-collapse: collapse;
        border-spacing: 0;
    }

    .fl {
        float: left
    }

    .clearfix {
        zoom: 1;
    }

    .clearfix:after {
        display: block;
        visibility: hidden;
        clear: both;
        height: 0;
        content: "";
    }

    /* 坦克6选1 */

    .section04 {
        padding: 1px;
        box-sizing: border-box;
    }

    .section04 h2 {
        text-align: center;
        margin: 50px auto 30px;
    }

    .tabbar ul li {
        float: left
    }

    .section04 .info h3 {
        font-size: 38px;
        color: #fcc689;
        margin-bottom: 26px;
    }

    .check_wrap {
        border: 1px solid #fcc689;
        width: 30px;
        height: 30px;
        position: absolute;
        margin: 10px 10px 0 0;
        top: 9px;
        left: 42px;
        z-index: 5;
    }

    .check_wrap label {
        width: 30px;
        height: 30px;
        position: absolute;
        top: 0;
        left: 0;
        cursor: pointer;
    }

    .check_wrap input {
        width: 30px;
        height: 30px;
        position: absolute;
        top: 0;
        left: 0;
        visibility: hidden;
        cursor: pointer;
    }

    .check_wrap input:checked+label {
        background: url(../http://awhd.kongzhong.com:80/tank_ld/resources/images/checked.png) center center no-repeat;
    }

    .info h4 {
        font-size: 22px;
        color: #fcc689;
    }

    .info h3 div {
        margin-left: 30px;
    }

    .info p {
        font-size: 18px;
        color: #a5a4a4;
        width: 68%;
    }

    .trans {
        transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        /* Internet Explorer  用360兼容模式测试发现IE9及以下不好使*/
        -moz-transform: rotate(90deg);
        /* Firefox */
        -webkit-transform: rotate(90deg);
        /* Safari 和 Chrome */
        -o-transform: rotate(90deg);
        /* Opera */
        font-size: 38px;
        margin-top: 39px;
        margin-left: -38px;
        color: #fcc689;
        white-space: nowrap;
    }

    .section04 ul li:nth-child(2) .info_fold .trans {
        margin-top: 86px;
        margin-left: -82px;
    }

    .section04 ul li:nth-child(3) .info_fold .trans {
        margin-top: 25px;
        margin-left: -20px;
    }

    .section04 ul li:nth-child(4) .info_fold .trans {
        margin-top: 33px;
        margin-left: -21px;
    }

    .section04 ul li:nth-child(5) .info_fold .trans {
        margin-top: 42px;
        margin-left: -34px;
    }

    .section04 ul li:nth-child(6) .info_fold .trans {
        margin-top: 43px;
        margin-left: -35px;
    }

    .rel {
        position: relative;
    }

    .abs {
        position: absolute;
        top: 10px;
        left: 50px;
    }

    .tabbar {
        width: 1220px;
        margin: 0 auto;
    }

    .info_fold {
        top: 60px;
        left: 41px;
    }

    .unfold {
        display: none;
    }

    .unfold img {
        width: 652px;
        height: 657px;
    }

    .click {
        position: absolute;
        top: 52px;
        left: 0;
        height: 91%;
        width: 100%;
    }

    .parent {
        position: relative;
    }

    .tip_bottom {
        margin: 40px auto 0;
        text-align: center;
    }

    .tip_bottom .get-btn {
        display: inline-block;
        *display: inline;
        *zoom: 1;
        margin-bottom: 10px;
        width: 218px;
        line-height: 55px;
        color: #2f2412;
        font-size: 22px;
        font-weight: bold;
        text-align: center;
        background-image: url(../http://awhd.kongzhong.com:80/tank_ld/resources/images/btn2.png);
    }
</style>

<body>
    <div class="section section04">
        <div class="main">
            <h2><img src="http://awhd.kongzhong.com:80/tank_ld/resources/images/title.png" alt></h2>
            <div class="tabbar">
                <ul class="cl clearfix">
                    <li class="parent">
                        <div class="check_wrap" id="1">
                            <input type="checkbox" id="check6_fold" name="chose">
                            <label for="check6_fold"></label>
                        </div>
                        <div class="fold rel">
                            <img src="http://awhd.kongzhong.com:80/tank_ld/resources/images/img6_fold.png">
                            <div class="info_fold abs">
                                <div class="trans">M2A3</div>
                            </div>
                            <div class="click"></div>
                        </div>
                        <div class="unfold rel">
                            <img src="http://awhd.kongzhong.com:80/tank_ld/resources/images/img6_unfold.png">
                            <div class="abs">
                                <div class="info">
                                    <h3 class="clearfix">
                                        <div class="fl">M2A3</div>
                                    </h3>
                                    <h4>M2A3介绍</h4>
                                    <p>M2A3布雷德利作为布雷德利装甲车家族的一员,它的诞生是为了对抗BMP系列,强大的部队运输能力、强大的火力和优异的机动性得到证明。</p>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="parent">
                        <div class="check_wrap" id="2">
                            <input type="checkbox" id="check3_fold" name="chose">
                            <label for="check3_fold"></label>
                        </div>
                        <div class="fold rel">
                            <img src="http://awhd.kongzhong.com:80/tank_ld/resources/images/img3_fold.png">
                            <div class="info_fold abs">
                                <div class="trans">阿尔-侯赛因</div>
                            </div>
                            <div class="click"></div>
                        </div>
                        <div class="unfold rel">
                            <img src="http://awhd.kongzhong.com:80/tank_ld/resources/images/img3_unfold.png">
                            <div class="abs">
                                <div class="info">
                                    <h3 class="clearfix">
                                        <div class="fl">阿尔-侯赛因</div>
                                    </h3>
                                    <h4>阿尔-侯赛因介绍</h4>
                                    <p>这是一种升级型的挑战者1坦克,相比于原来的挑战者1坦克,该型坦克采用了诸多改进措施。</p>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="parent">
                        <div class="check_wrap" id="3">
                            <input type="checkbox" id="check5_fold" name="chose">
                            <label for="check5_fold"></label>
                        </div>
                        <div class="fold rel">
                            <img src="http://awhd.kongzhong.com:80/tank_ld/resources/images/img5_fold.png">
                            <div class="info_fold abs">

                                <div class="trans">章鱼</div>
                            </div>
                            <div class="click"></div>
                        </div>
                        <div class="unfold rel">
                            <img src="http://awhd.kongzhong.com:80/tank_ld/resources/images/img5_unfold.png">
                            <div class="abs">
                                <div class="info">
                                    <h3 class="clearfix">
                                        <div class="fl">章鱼</div>
                                    </h3>
                                    <h4>章鱼介绍</h4>
                                    <p>2S25章鱼-SD自行反坦克歼击车是在1984年至2010年制造,设计时使用了934工程原型车作为平台。</p>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="parent">
                        <div class="check_wrap" id="4">
                            <input type="checkbox" id="check4_fold" name="chose">
                            <label for="check4_fold"></label>
                        </div>
                        <div class="fold rel">
                            <img src="http://awhd.kongzhong.com:80/tank_ld/resources/images/img4_fold.png">
                            <div class="info_fold abs">
                                <div class="trans">VT-4</div>
                            </div>
                            <div class="click"></div>
                        </div>
                        <div class="unfold rel">
                            <img src="http://awhd.kongzhong.com:80/tank_ld/resources/images/img4_unfold.png">
                            <div class="abs">
                                <div class="info">
                                    <h3 class="clearfix">
                                        <div class="fl">VT-4</div>
                                    </h3>
                                    <h4>VT-4介绍</h4>
                                    <p>VT-4又称为MBT3000,首次在2012年于欧洲展览会上亮相,它是VT1型坦克的改进型号。</p>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="parent">
                        <div class="check_wrap" id="5">
                            <input type="checkbox" id="check2_fold" name="chose">
                            <label for="check2_fold"></label>
                        </div>
                        <div class="fold rel">
                            <img src="http://awhd.kongzhong.com:80/tank_ld/resources/images/img2_fold.png">
                            <div class="info_fold abs">
                                <div class="trans">德拉贡</div>
                            </div>
                            <div class="click"></div>
                        </div>
                        <div class="unfold rel">
                            <img src="http://awhd.kongzhong.com:80/tank_ld/resources/images/img2_unfold.png">
                            <div class="abs">
                                <div class="info">
                                    <h3 class="clearfix">
                                        <div class="fl">德拉贡</div>
                                    </h3>
                                    <h4>德拉贡介绍</h4>
                                    <p>BMP-3M 德拉贡 125是BMP系列最新的战车,配备125mm火炮。</p>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="parent">
                        <div class="check_wrap" id="6">
                            <input type="checkbox" id="check1_fold" name="chose">
                            <label for="check1_fold"></label>
                        </div>
                        <div class="fold rel" style=" display: none;">
                            <img src="http://awhd.kongzhong.com:80/tank_ld/resources/images/img1_fold.png">
                            <div class="info_fold abs">
                                <div class="trans">M1A2</div>
                            </div>
                            <div class="click"></div>
                        </div>
                        <div class="unfold rel" style=" display: block;">
                            <img src="http://awhd.kongzhong.com:80/tank_ld/resources/images/img1_unfold.png">
                            <div class="abs">
                                <div class="info">
                                    <h3 class="clearfix">
                                        <div class="fl">M1A2</div>
                                    </h3>
                                    <h4>M1A2介绍</h4>
                                    <p>M1A2主战坦克以M1A1为基础实现了众多升级,包括改进火控、外形、计算机系统、装甲和升级传动装置。</p>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="tip_bottom">
                <a href="javascript:void(0)" class="get-btn">立刻领取</a>
                <p>新老用户选定3辆车型领取,自动发放相应车型到绑定的登录账户</p>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        // 坦克6选1

        $(".tabbar ul li").each(function () {
            var fold = $(this).find(".fold");
            var unfold = $(this).find(".unfold");
            if (fold.is(":hidden")) {
                $(this).width(652);
            } else {
                $(this).width(109);
            }
        })

        $(".tabbar ul li .click").click(function () {
            $(this).parent().parent().animate({ width: 652 }, 200);
            $(this).parent().parent().find(".unfold").show();
            $(this).parent().parent().find(".fold").hide();
            $(this).parent().parent().siblings().animate({ width: 109 }, 200);
            $(this).parent().parent().siblings().find(".unfold").hide();
            $(this).parent().parent().siblings().find(".fold").show();
        })
        var num = 0;
        // 监控选中状态
        $("input[type=‘checkbox‘]").change(function () {
            if ($(this).is(":checked")) {
                num++;
            }
            else if (!$(this).is(":checked")) {
                num--;
            }
            if ($(this).is(":checked") && num > 3) {
                // 已选三个时,将另外选中的值设置为false
                $(this).prop("checked", false);
                num = 3;
            }
        }
        )
        var arrData;
        function getFunc() {
            var result = $("input[type=‘checkbox‘]:checked").length;
            if (result < 3) {
                alert("请选择三个坦克");
                return false;
            } else {
                $("input[type=‘checkbox‘]").each(function () {
                    if ($(this).is(":checked")) {
                        arr.push($(this).parent().attr("id"));
                    }
                })
                console.log("最终选取结果" + arr.slice(-3));
                arrData = arr.slice(-3);
                var data = {
                    id1: arrData[0],
                    id2: arrData[1],
                    id3: arrData[2]
                }
                $.ajax({
                    type: "POST",
                    dataType: "JSON",
                    data: data,
                    url: pageUrl + "/你定义的接口",
                    success: function (data) {
                        alert(data.msg);
                    }
                });
            }
        }
    </script>
</body>

</html>

  

以上是关于监测checkbox复选框选中个数,可指定数目的主要内容,如果未能解决你的问题,请参考以下文章

复选框checkbox选中个数限制

emwin中checkbox怎么用

JS获取checkbox的个数简单实例

delphi 如何判断多个checkbox是不是选中

判断checkbox是不是被选中

CheckBox 被选中但不执行功能