JQuery 實現複選框全選反選功能
阿新 • • 發佈：2018-11-30
HTML部分
<body>
<input type="checkbox" name="fu">全選(父)<br>
<input type="checkbox" name="zi">子1<br>
<input type="checkbox" name="zi">子2<br>
<input type="checkbox" name="zi">子3<
</body>全選 和 全不選
$(document).ready(function () { $("input[name='fu']").click(function () { var a=$("input[name='fu']").length; var b=$("input[name='fu']:checked").length; if (a==b){ $(":checkbox[name='zi']").prop("checked", true); }else { $(":checkbox[name='zi']").prop("checked", false); } }); }); $(document).ready(function () { $("input[name='fu']").click(function () { var a=$("input[name='fu']").length; var b=$("input[name='fu']:checked").length; if (a==b){ $(":checkbox[name='zi']").prop("checked", true); }else { $(":checkbox[name='zi']").prop("checked", false); } }); });
設定 每個子複選框 的name 都為 “zi”，然後設定唯一的全選的複選框的name 為“fu”，然後在檔案載入完，這個大前提下，設定全選框的點選事件
反選問題（點選全部的子複選框，選中全選框）
$(document).ready(function () { $("input[name='zi']").click(function () { var a=$("input[name='zi']").length; var b=$("input[name='zi']:checked").length; if(a>b){ $(":checkbox[name='fu']").prop("checked", false); } else if(a==b){ $(":checkbox[name='fu']").prop("checked", true); } }); }); } else if(a==b){ $(":checkbox[name='fu']").prop("checked", true); } }); });
完整程式碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>複選框Demo</title> <script src="jquery-1.9.1.js"></script> <script> $(document).ready(function () { $("input[name='zi']").click(function () { var a=$("input[name='zi']").length; var b=$("input[name='zi']:checked").length; if(a>b){ $(":checkbox[name='fu']").prop("checked", false); } else if(a==b){ $(":checkbox[name='fu']").prop("checked", true); } }); $("input[name='fu']").click(function () { var a=$("input[name='fu']").length; var b=$("input[name='fu']:checked").length; if (a==b){ $(":checkbox[name='zi']").prop("checked", true); }else { $(":checkbox[name='zi']").prop("checked", false); } }); }); </script> </head> <body> <input type="checkbox" name="fu">全選(父)<br> <input type="checkbox" name="zi">子1<br> <input type="checkbox" name="zi">子2<br> <input type="checkbox" name="zi">子3 </body> </html>