html代码
<body> <input type="checkbox" /> <input type="button" value="全选中" /> <input type="button" value="全不选" /> <input type="button" value="反选" /> <input type="button" value="输出选中项" /> <hr /> <input type="checkbox" value="js" />js<br /> <input type="checkbox" value="jq" />jq<br /> <input type="checkbox" value="php" />php<br /> <input type="checkbox" value="node" />node </body>script
<script> $(function () { //全选按钮，使所有复选框选中 $(":button:eq(0)").click(function () { $(":checkbox").prop("checked", true); }); //全不选按钮，使所有复选框取消选中 $(":button:eq(1)").click(function () { $(":checkbox").prop("checked", false); }); //反选按钮 //1.使选中的复选框取消选中 //2.未选中的复选框选中 $(":button:eq(2)").click(function () { $(":checkbox:eq(0)").siblings(":checkbox").each(function () {//each() 方法规定为每个匹配元素规定运行的函数 $(this).prop("checked", !$(this).prop("checked")); }) xuan(); }); //输出选中项按钮 $(":button:eq(3)").click(function () { var a = ""; $(":checkbox:eq(0)").siblings(":checkbox").each(function () { if ($(this).is(":checked")) { a += $(this).val() + ";"; } }) console.log(a); }); //全选复选框 $(":checkbox:eq(0)").click(function () { if ($(":checkbox:eq(0)").is(":checked")) {//是否选中 // console.log($(":checkbox:eq(0)").is(":checked")) $(":checkbox").prop("checked", true); } else { $(":checkbox").prop("checked", false); } }); //复选框 $(":checkbox:eq(0)").siblings(":checkbox").click(function () { xuan(); }) //选中的方法 var xuan = function () { if ($(":checkbox:eq(0)").siblings(":checkbox:checked").length == 4) {//获取被选中的多选框个数是否=4 $(":checkbox:eq(0)").prop("checked", true); } else { $(":checkbox:eq(0)").prop("checked", false); } } }); </script>