<div class="checkbox-box"> <div class="checkbox-list"> <p><input type="checkbox" id="ball1" value="篮球"><label for="ball1">篮球</label></p> <p><input type="checkbox" id="ball2" value="足球"><label for="ball2">足球</label></p> <p><input type="checkbox" id="ball3" value="棒球"><label for="ball3">棒球</label></p> <p><input type="checkbox" id="ball4" value="弹力球"><label for="ball4">弹力球</label></p> <p><input type="checkbox" id="ball5" value="网球球"><label for="ball5">网球球</label></p> <p><input type="checkbox" id="ball6" value="乒乓球"><label for="ball6">乒乓球</label></p> <p><input type="checkbox" id="ball7" value="羽毛球"><label for="ball7">羽毛</label></p> </div> <div class="btnAll"> <button class="allSelect">全选</button> <button class="notAllSelect">全不选</button> <button class="reverseSelect">反选</button> <button class="selectVal">获取选中的值</button> </div> </div>
.btnAll button { display:inline-block; padding:6px 12px; font-size:14px; font-weight:400; line-height:1.42857143; text-align:center; cursor:pointer; border:1px solid transparent; border-radius:4px; -webkit-appearance:button; cursor:pointer; color:#fff; background-color:#5bc0de; border-color:#46b8da; }
// 绑定click事件 $(document).delegate(‘.allSelect‘, ‘click‘, allSelect) .delegate(‘.notAllSelect‘, ‘click‘, notAllSelect) .delegate(‘.reverseSelect‘, ‘click‘, reverseSelect) .delegate(‘.selectVal‘, ‘click‘, selectVal); // 全选 function allSelect() { $(".checkbox-list input").prop(‘checked‘, true); } // 全不选 function notAllSelect() { $(".checkbox-list input").prop(‘checked‘, false); } // 反选 function reverseSelect() { $(".checkbox-list input").each(function() { $(this).prop(‘checked‘, !$(this).prop(‘checked‘)); }) } // 获取选中的值 function selectVal() { var valArr = ‘‘; $(".checkbox-list input").each(function() { if ($(this).prop(‘checked‘) == true) { valArr += $(this).val() + ‘,‘; }; }) alert(valArr) }
时间: 2024-10-15 09:51:59