| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Document</title> |
| <script src="./js/jquery-3.6.0.min.js"></script> |
| </head> |
| <style> |
| body, |
| p, |
| h1, |
| h2, |
| h3, |
| h4, |
| h5, |
| h6, |
| ul, |
| ol, |
| dl, |
| li, |
| dt, |
| dd { |
| |
| margin: 0; |
| padding: 0; |
| |
| font-size: 14px; |
| font-family: "Microsoft Yahei", sans-serif; |
| |
| list-style: none; |
| |
| cursor: default; |
| } |
| .popupView{ |
| width: 100vw; |
| height: 100vh; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| } |
| .popup{ |
| min-width: 350px; |
| position: relative; |
| max-width: 500px; |
| min-height: 200px; |
| border: 2px solid #f3f3f3; |
| box-sizing: border-box; |
| padding: 15px 0 0 0; |
| border-radius: 6px; |
| font-size: 13px; |
| white-space: nowrap; |
| } |
| .p-title{ |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| position: relative; |
| } |
| .red{ |
| color: red; |
| } |
| .p-title .txt{ |
| white-space: nowrap; |
| } |
| .p-title .close{ |
| position: absolute; |
| right: 15px; |
| color: #666; |
| font-size: 15px; |
| } |
| .p-content{ |
| padding: 20px 15px 0 15px; |
| display: flex; |
| max-height: 300px; |
| overflow-y: scroll; |
| } |
| .arrlist{ |
| display: flex; |
| align-items: center; |
| flex-wrap: wrap; |
| margin-bottom: 50px; |
| } |
| .arrlist li{ |
| display: flex; |
| align-items: center; |
| margin-right: 20px; |
| margin-bottom: 10px; |
| } |
| .arrlist li input{ |
| margin-right: 3px; |
| } |
| .popfot{ |
| height: 50px; |
| display: flex; |
| align-items: center; |
| align-items: center; |
| border-top: 2px solid #f3f3f3; |
| justify-content: flex-end; |
| position: absolute; |
| bottom: 0; |
| padding: 0 15px; |
| width: 100%; |
| box-sizing: border-box; |
| background: #fff; |
| } |
| .popfot .flex{ |
| display: flex; |
| align-items: center; |
| margin-left: 18px; |
| } |
| #reverse{ |
| margin-left: 18px; |
| } |
| .popfot .btn{ |
| margin-left: 18px; |
| width: 100px; |
| height: 28px; |
| text-align: center; |
| line-height: 28px; |
| border-radius: 6px; |
| border: 1px solid #dcdfe6; |
| } |
| .popfot .flex input{ |
| margin-right: 3px; |
| } |
| .popfot .blue{ |
| background: #409eff; |
| color: #fff; |
| |
| } |
| .p-title{ |
| padding-bottom: 10px; |
| } |
| .none{ |
| display: none !important; |
| } |
| </style> |
| <body> |
| <div class="popupView"> |
| <div class="popup"> |
| <div class="p-title"> |
| <div class="txt">复选框</div> |
| <span class="close">X</span> |
| </div> |
| <div class="p-content"> |
| <ul class="arrlist"> |
| <li><input type="checkbox" value="嗯呢">嗯呢</li> |
| </ul> |
| </div> |
| <div class="popfot"> |
| <div class="flex"><input type="checkbox" id="checkall">全选</div> |
| <div id="reverse">反选</div> |
| <div class="btn blue" id="confirm">打印选中项</div> |
| </div> |
| </div> |
| </div> |
| </body> |
| <script> |
| $(function() { |
| var checkedList = [] |
| var arr = ['苹果','雪梨' ,'橙汁' ,'香蕉','草莓','荔枝' ,'龙眼' ,'芒果','青瓜','茄子' ,'榴莲' ,'李子','葡萄','西瓜' ,'哈密瓜' ,'桃子','橘子','橄榄' ,'坚果'] |
| let str = '' |
| for (let i = 0; i <arr.length; i++) { |
| str += `<li><input type="checkbox" class="item" value="${arr[i]}">${arr[i]}</li>` |
| } |
| document.getElementsByClassName('arrlist')[0].innerHTML = str |
| var $item = $(".arrlist input") |
| $("#checkall").change(function() { |
| if ($("#checkall").prop("checked")) { |
| $item.each(function(){ |
| $(this).prop("checked", true) |
| }) |
| } else { |
| $item.each(function(){ |
| $(this).prop("checked", false) |
| }) |
| } |
| }) |
| $(".item").change(function() { |
| if ($item.length === $(".item:checked").length) { |
| $("#checkall").prop("checked", true) |
| } else { |
| $("#checkall").prop("checked", false) |
| } |
| }) |
| $("#reverse").click(function(){ |
| $item.each(function(){ |
| $(this).prop("checked",!$(this).prop("checked")) |
| }) |
| }) |
| $("#confirm").click(function(){ |
| checkedList = [] |
| for (var k in $item) { |
| if ($item[k].checked) { |
| checkedList.push($item[k].value) |
| } |
| } |
| console.log('选中项',checkedList) |
| }) |
| $(".close").click(function(){ |
| $(".popup").addClass('none') |
| }) |
| }) |
| </script> |
| </html> |
