碼上歡樂
相關內容    簡體    繁體

監測checkbox復選框選中個數，可指定數目

本文轉載自   查看原文   2020-04-16 14:41   588    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>

　　


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 如何獲取復選框選中的數據？ JS復選框選中 復選框選中,取值 多組復選框選中獲取 關於復選框選中狀態的判斷 angularjs 復選框選中與復現 設置checkbox不能選中，復選框不能選中 獲取復選框checkbox選中的值 C#ListView控件添加Checkbox復選框並獲取選中的數目,檢查checkbox是否勾選 復選框選中和取消選中觸發事件
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM