js实现全选/全不选、反选

时间:2023-03-08 22:06:35
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
//全不选
/*
$('#checkAll').click(function() {
var chk = $(this).prop('checked');
$('input[name=choose]').prop('checked',chk);
});
*/
$('#checkAll').click(function() {
$('input[name=choose]').prop('checked',this.checked);
});
//反选
$('#checkRev').click(function(){
$('input[name=choose]').each(function(){
this.checked = !this.checked;
});
});
});
</script>
</head>
<body>
<input type="checkbox" id="checkAll">全选/全不选<br>
<input type="checkbox" id="checkRev">反选<br>
<input type="checkbox" name="choose">1<br>
<input type="checkbox" name="choose">2<br>
<input type="checkbox" name="choose">3<br>
<input type="checkbox" name="choose">4<br>
<input type="checkbox" name="choose">5<br>
<input type="checkbox" name="choose">6<br>
<input type="checkbox" name="choose">7<br>
<input type="checkbox" name="choose">8<br>
<input type="checkbox" name="choose">9<br>
<input type="checkbox" name="choose">10<br>
</body>
</html>