监测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复选框选中个数，可指定数目的主要内容，如果未能解决你的问题，请参考以下文章