需求：提供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;
30px;
height: 30px;
position: absolute;
margin: 10px 10px 0 0;
top: 9px;
left: 42px;
z-index: 5;
}
.check_wrap label {
30px;
height: 30px;
position: absolute;
top: 0;
left: 0;
cursor: pointer;
}
.check_wrap input {
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;
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 {
1220px;
margin: 0 auto;
}
.info_fold {
top: 60px;
left: 41px;
}
.unfold {
display: none;
}
.unfold img {
652px;
height: 657px;
}
.click {
position: absolute;
top: 52px;
left: 0;
height: 91%;
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;
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({ 652 }, 200);
$(this).parent().parent().find(".unfold").show();
$(this).parent().parent().find(".fold").hide();
$(this).parent().parent().siblings().animate({ 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>