- <!DOCTYPE html>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- </title>
- </head>
- <body>
- <ul id="ul">
- <li class="all" style="border-bottom: 1px solid #eee;">
- <input type="checkbox" name="sex" id="s5">
- <label for="s5">
- </label>
- <label for="s5">
- 全选
- </label>
- </li>
- <!-- <li>
- <input type="checkbox" disabled="true" name="sex" id="s3"><label for="s3"></label>
- <label for="s3"> 满 100 元可用 </label>
- </li> -->
- <li>
- <input type="checkbox" name="sex" id="s1">
- <label for="s1">
- </label>
- <label for="s1">
- 允许使用红包
- </label>
- </li>
- <li>
- <input type="checkbox" name="sex" id="s2">
- <label for="s2">
- </label>
- <label for="s2">
- 下单立减 5 元优惠券
- </label>
- </li>
- <li>
- <input type="checkbox" name="sex" id="s4">
- <label for="s4">
- </label>
- <label for="s4">
- 用户首单免单
- </label>
- </li>
- <li>
- <input type="checkbox" name="sex" id="s6">
- <label for="s6">
- </label>
- <label for="s6">
- 每单赠送 1-10 元优惠券
- </label>
- </li>
- <li>
- <input type="checkbox" name="sex" id="s7">
- <label for="s7">
- </label>
- <label for="s7">
- 每用户限购一笔
- </label>
- </li>
- <li>
- <input type="checkbox" name="sex" id="s8">
- <label for="s8">
- </label>
- <label for="s8">
- 江浙沪包邮
- </label>
- </li>
- </ul>
- <script type="text/javascript">
- let li = document.querySelectorAll('#ul li:not(.all)'),
- count = li.length,
- all = document.querySelector('.all input');
- for (let i = 0; i < count; i++) {
- li[i].onclick = function() {
- let selCount = document.querySelectorAll('#ul li:not(.all) input:checked');
- all.checked = selCount.length == count
- }
- }
- document.querySelector('.all').onclick = function() {
- let isAll = all.checked let inputs = document.querySelectorAll('#ul li:not(.all) input') for (let i = 0; i < inputs.length; i++) {
- inputs[i].checked = isAll
- }
- }
- </script>
- <style type="text/CSS">
- ul,li{ list-style: none; } /* 取紧邻 input 的下一个 label*/ input+label{ width:
- 14px;height: 14px;display: inline-block; border: 1px solid #aaa;border-radius:
- 3px; text-align: center; margin-right: 5px; background-color: #fff; transition:
- 0.3s; } input{ display: none; } input+label:after{ transition: 0.2s; transform:
- rotate(45deg) scaleY(0.3); content: ''; position: relative; top: -4px;
- display: inline-block;width: 4px;height: 8px; border-bottom: 2px solid
- #fff;border-right: 2px solid #fff; } input:checked+label{ background-color:
- #07bb11;border-color: #07bb11; } input:checked+label:after{ transform:
- rotate(45deg) scale(1); } li{ display: flex;align-items: center;height:
- 46px; } label{ cursor: pointer;font-size: 16px; } /* 不可选中 */ input:disabled+label{
- border-color: #aaa; } input:disabled+label+label{ color: #aaa;text-decoration:
- line-through; }
- </style>
- </body>
- </HTML>
来源: http://www.qdfuns.com/article/15651/f950332cc6210253398ffa91af084249.html