爱好选择（原生）
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>爱好选择（原生）</title> </head> <body> <form method="post" action=""> 你爱好的运动是？<input type="checkbox" id="checkedAllBox"/>全选/全不选 <br/> <input type="checkbox" name="items" value="足球"/>足球 <input type="checkbox" name="items" value="篮球"/>篮球 <input type="checkbox" name="items" value="羽毛球"/>羽毛球 <input type="checkbox" name="items" value="乒乓球"/>乒乓球 <br/> <input type="button" id="checkedAllBtn" value="全 选"/> <input type="button" id="checkedNoBtn" value="全不选"/> <input type="button" id="checkedRevBtn" value="反 选"/> <input type="button" id="sendBtn" value="提 交"/> </form> <script type="text/javascript"> /* * 功能说明： * 1.点击'全选'：选中所有爱好 * 2.点击'全不选'：所有爱好都不勾选 * 3.点击'反选'：改变所有爱好的勾选状态 * 4.点击'提交'：提示所有勾选的爱好 * 5.点击'全选/全不选'：选中所有爱好，或者全不选中 * 6.点击某个爱好时，必要时更新'全选/全不选'的选中状态 * 技术点： * 1.DOM查询 * 2.事件回调函数绑定 * 3.checkbox操作 * 4.事件回调函数中的this * 5.逻辑思维能力 */ window.onload = function () { var items = document.getElementsByName("items"); //1.#checkedAllBtn var checkedAllBtn = document.getElementById("checkedAllBtn"); checkedAllBtn.onclick = function () { setItemsChecked(true); checkedAllBox.checked = true; }; //2.#checkedNoBtn var checkedNoBtn = document.getElementById("checkedNoBtn"); checkedNoBtn.onclick = function () { setItemsChecked(false); checkedAllBox.checked = false; }; //3.#checkedRevBtn var checkedRevBtn = document.getElementById("checkedRevBtn"); checkedRevBtn.onclick = function () { setItemsChecked(); //点满时将checkedAllBox.checked设置为true //统计当前items中被选中的个数 checkedAllBox.checked = isAllChecked(); }; //4.#checkedAllBox var checkedAllBox = document.getElementById("checkedAllBox"); checkedAllBox.onclick = function () { setItemsChecked(this.checked); }; //5.#sendBtn var sendBtn = document.getElementById("sendBtn"); sendBtn.onclick = function () { for (var i = 0; i < items.length; i++) { if (items[i].checked) { alert(items[i].value); } } }; //6.items for (var i = 0; i < items.length; i++) { items[i].onclick = function () { //点满时将checkedAllBox.checked设置为true //统计当前items中被选中的个数 checkedAllBox.checked = isAllChecked(); } } function isAllChecked() { for (var j = 0; j < items.length; j++) { if (!items[j].checked) return false; } return true; }; function setItemsChecked(checked) { for (var i = 0; i < items.length; i++) { items[i].checked = (checked == undefined) ? (!items[i].checked) : checked; } } } </script> </body> </html>
爱好选择（jQuery）
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>爱好选择（jQuery）</title> </head> <body> <form> 你爱好的运动是？<input type="checkbox" id="checkedAllBox"/>全选/全不选 <br/> <input type="checkbox" name="items" value="足球"/>足球 <input type="checkbox" name="items" value="篮球"/>篮球 <input type="checkbox" name="items" value="羽毛球"/>羽毛球 <input type="checkbox" name="items" value="乒乓球"/>乒乓球 <br/> <input type="button" id="checkedAllBtn" value="全 选"/> <input type="button" id="checkedNoBtn" value="全不选"/> <input type="button" id="checkedRevBtn" value="反 选"/> <input type="button" id="sendBtn" value="提 交"/> </form> <script type="text/javascript" src="../js/jquery.min.js"></script> <script type="text/javascript"> /* * 功能说明： * 1.点击'全选'：选中所有爱好 * 2.点击'全不选'：所有爱好都不勾选 * 3.点击'反选'：改变所有爱好的勾选状态 * 4.点击'全选/全不选'：选中所有爱好，或者全不选中 * 5.点击某个爱好时，必要时更新'全选/全不选'的选中状态 * 6.点击'提交'：提示所有勾选的爱好 */ $(function () { var $Items = $(':checkbox[name=items]'); var $checkedAllBox = $('#checkedAllBox'); //1.点击'全选'：选中所有爱好 $('#checkedAllBtn').click(function () { $Items.prop('checked', true); $checkedAllBox.prop('checked', true); }); //2.点击'全不选'：所有爱好都不勾选 $('#checkedNoBtn').click(function () { $Items.prop('checked', false); $checkedAllBox.prop('checked', false); }); //3.点击'反选'：改变所有爱好的勾选状态 $('#checkedRevBtn').click(function () { $Items.each(function () { this.checked = !this.checked; }); $checkedAllBox.prop('checked', $Items.filter(':not(:checked)').size()===0); }); //4.点击'全选/全不选'：选中所有爱好，或者全不选中 $checkedAllBox.click(function () { $Items.prop('checked', this.checked); }); //5.点击某个爱好时，必要时更新'全选/全不选'的选中状态 $Items.click(function () { $checkedAllBox.prop('checked', $Items.filter(':not(:checked)').size()===0); }); //6.点击'提交'：提示所有勾选的爱好 $('#sendBtn').click(function () { $Items.filter(':checked').each(function () { alert(this.value); }) }); }); </script> </body> </html>