<body><div class="page-container"> <div class="view-container"> <header class="navbar"> <div class="navbar-back" onclick="window.history.go(-1)">返回</div> <h2 class="navbar-con">页面标题</h2> </header> <div class="container"> <section class="check-sub-back"> <div class="check-sub-title" > <p class="bank-card-linked" id="title">1.这是一个多选题,你的选择是?<br/> </p> <p class="option-txt" id="option-txt"> </p> <p class="opt-arrow-right"></p>
</div> <div class="check-sub-box" id="box"> <ul class="adr-row" style="border-bottom:1px solid #e6e6e6; "> <li> <a href="controller.html" class="row-cancel"> 取消 </a> </li> <li> <a class="row-place">多选标题</a> </li> <li> <a href="bankcard.html" class="row-save"> 保存 </a> </li> </ul> <div class="option-box"> <ul id="option-box"> <li class="item" id="option1"> <input type="checkbox" value="选项 1" class="hide checkbox-checked" id="checkbox-f1"/> <label for="checkbox-f1" class="checkbox-default"> 选项 1 </label> </li> <li class="item" id="option2"> <input type="checkbox" value="选项 2" class="hide checkbox-checked" id="checkbox-f2"/> <label for="checkbox-f2" class="checkbox-default"> 选项 2 </label> </li> <li class="item" id="option3"> <input type="checkbox" value="选项 3" class="hide checkbox-checked" id="checkbox-f3"/> <label for="checkbox-f3" class="checkbox-default"> 选项 3 </label> </li> <li class="item" id="option4"> <input type="checkbox" value="选项 4" class="hide checkbox-checked" id="checkbox-f4"/> <label for="checkbox-f4" class="checkbox-default"> 选项 4 </label> </li> <li class="item" id="option5"> <input type="checkbox" value="选项 5" class="hide checkbox-checked" id="checkbox-f5"/> <label for="checkbox-f5" class="checkbox-default"> 选项 5 </label> </li> <li class="item" id="option6"> <input type="checkbox" value="选项 6" class="hide checkbox-checked" id="checkbox-f6"/> <label for="checkbox-f6" class="checkbox-default"> 选项 6 </label> </li> </ul> </div> </div> </section> </div>
</div></div></body><script type="text/javascript"> window.onload = function() { var title = document.getElementById(‘title‘); ／／获取id为title的元素 var box = document.getElementById(‘box‘); title.onclick = function () { ／／title 元素点击时 box.style.display = ‘block‘;／／box中css样式修改 display：block； } var list = document.querySelectorAll("#option-box li"); ／／获取所有的＃option－box li 放到list中 var optxt = document.getElementById(‘option-txt‘); console.log(list); var test = {};//创建对象 for (var i = 0; i < list.length; i++) { list[i].onchange = function (e) {／／onchange事件点击一次是true,再次点击是false optxt.innerHTML = ""; test[e.target.value] = e.target.checked; 获取值 console.log(test); console.log(test[e.target.value]); for(var item in test) {／／遍历 if (!!test[item]) { optxt.innerHTML += item + ‘ ‘;／／赋值// console.log(e.target.value); } console.log(item); }
}
}
}</script></html>
/*多选按钮样式 <-- start --> */.checkbox-default { position: relative; width: 90%; padding: 0 18px 0 38px; height: 60px; display: block; line-height: 60px; color: #333;}.checkbox-default::before { content: ""; position: absolute; left: 0; top: 18px; width: 21px; height: 21px; margin-right: 18px; color: #666; background-color: #fff; border: 1px solid #999; border-radius: 5px;}
.checkbox-checked:checked + .checkbox-default::before { content: ""; color: #3399ff; border: 1px solid #3399ff; background: url("../../images/radio-checkd-icon.png") #3399ff center no-repeat; margin-right: 12px; background-size: 12px 10px;}/* <-- end --> */
/*复选页面 题目中显示选项内容 <-- start --> */.check-sub-back{ background-color: rgba(0, 0, 0, 0.2); font-size: 14px; height: 1850px; z-index:10; position: fixed; width:100%;}.check-sub-title{ background-color: #e6e6e6; font-size:18px; position: relative;}
.check-sub-title:active { background-color: #efefef;
}.check-sub-box{ width: 100%; min-width: 320px; background: #fff; position: fixed; left: 0; right: 0; bottom: 0; z-index: 999; display: none; animation: fadeInUp .3s .2s ease both;}
.opt-arrow-right { background-image: url("../../images/arrow_right.png"); background-size: 10px 14px; background-repeat: no-repeat; width: 20px; height: 20px; position: absolute ; top:57%; right:1%; transform: translate( -50%, -50%); -webkit-transform: translate( -50%, -50%); -moz-transform: translate( -50%, -50%); -o-transform: translate( -50%, -50%);
}
.option-box{
background: #fff; height:280px; overflow-y: scroll;}.option-box .item { display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; font-size: 18px; padding-left: 18px; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-box-align: center; -ms-flex-align: center; align-items: center;}
.option-box .item::before { content: ""; position: absolute; left: 0; width: 200%; height: 0; border-bottom: 1px solid #d7d7d7; transform-origin: left top; transform: scale3d(0.5, 0.5, 0.5); top: 0;}
.option-box li:active { background-color: #efefef;}
.option-txt{ font-size: 16px; color: #999999; padding: 0 0 10px 22px; margin-top: -10px;}/* <-- end --> */
时间： 2024-10-24 00:10:15