<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> html,body{ margin: 0; } *{ margin: 0; padding: 0; } .inbox{ margin: 50px auto; width: 400px; border: 1px solid gainsboro; border-radius: 5px; box-shadow: 5px 5px 5px gainsboro; } .inbox .item{ text-align: center; border-bottom: 1px solid gainsboro; overflow: hidden; display: flex; justify-content: center; align-items: center; } .inbox .item input{ height: 15px; flex: 1; outline-style: none; } .inbox p { box-sizing: border-box; border-left: 1px solid gainsboro; flex: 5; text-align: left; padding-left: 10px; padding-top:10px; padding-bottom: 10px; word-break: break-all; } .inbox .item:last-child{ border-radius: 5px; } .inbox .item:nth-child(odd){ border-color: ghostwhite; } .inbox .item input:checked + p{ background-color: gainsboro; text-decoration: line-through; } </style> </head> <body> <div class="inbox"> <div class="item"> <input type="checkbox"> <p>we are not a animals</p> </div> <div class="item"> <input type="checkbox"> <p>we are not a animals ksljdflkajsdfkjsdfsdfsalkdjfklajldfjkljsdfadfsdfadfsaaaaaaaaaffffffffffffff</p> </div> <div class="item"> <input type="checkbox"> <p>we are not a animals</p> </div> <div class="item"> <input type="checkbox"> <p>we are not a animals</p> </div> <div class="item"> <input type="checkbox"> <p>we are not a animals</p> </div> </div> </body> <script type="application/javascript"> const checkboxs = document.querySelectorAll('.inbox input[type="checkbox"]'); let lastChecked; function handler(e){ let isBetween = false; let self = this; if(e.shiftKey && this.checked){ checkboxs.forEach(function(checkbox){ if(checkbox ===self || checkbox ===lastChecked){//两次进入 console.log(checkbox); isBetween = !isBetween; } if(isBetween){ checkbox.checked = true; } }); } lastChecked = this; }; checkboxs.forEach(function(checkbox){ checkbox.addEventListener('click',handler,false) }); </script> </html>
转载于:https://my.oschina.net/u/3198493/blog/1143161