表单jQuery做法（全选,不全选,反选）
2018-06-28 本文已影响0人
明日计划
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单</title>
<script type="text/javascript" src="jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
$('#checkall01').click(function(){
$('.chick').prop('checked','checked');
})
$('#checkno').click(function(){
$('.chick').removeAttr('checked');
})
$('#checkrev').click(function(){
for (var i = 0; i < $('.chick').length; i++) {
if($('.chick').eq(i).prop('checked') == true) {
$('.chick').eq(i).removeAttr('checked');
}else{
$('.chick').eq(i).prop('checked','checked');
}
}
})
$('#send').click(function(){
for (var i = 0; i < $('.chick').length; i++) {
if($('.chick').eq(i).prop('checked') == true) {
alert($('.chick').eq(i).attr('value'));
}else{}
}
})
var length = 0;
for (var i = 0; i < $('.chick').length; i++) {
if($('.chick').eq(i).prop('checked') == true) {
length++
}else{}
}
if(length == $('.chick').length){
$('#checkall02').prop('checked','checked');
}
$('#checkall02').click(function(){
if($('#checkall02').prop('checked') == true) {
for (var i = 0; i < $('.chick').length; i++) {
$('.chick').eq(i).prop('checked','checked');
}}else{
for (var i = 0; i < $('.chick').length; i++) {
$('.chick').eq(i).removeAttr('checked');
}}
})
})
</script>
</head>
<body>
你爱好的运动是？<input type="checkbox" id="checkall02">全选/全不选
<br>
<input class="chick" type="checkbox" name="hobby" value="足球">足球
<input class="chick" type="checkbox" name="hobby" value="篮球">篮球
<input class="chick" type="checkbox" name="hobby" value="羽毛球">羽毛球
<input class="chick" type="checkbox" name="hobby" value="乒乓球">乒乓球
<br>
<input type="button" id="checkall01" value="全选">
<input type="button" id="checkno" value="全不选">
<input type="button" id="checkrev" value="反选">
<input type="button" id="send" value="提交">
</body>
</html>
效果：
image.png
