复选框的应用2
<!DOCTYPE html>
<html>
<head>
<title>复选框的运用</title>
<script type="text/javascript" src="js/jquery-3.2.0.min.js"></script>
</head>
<body>
<form>
你的爱好是做什么？<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="乒乓球">乒乓球
<input type="checkbox" name="items" value="羽毛球">羽毛球<br/>
<input type="button" name="" id="checkAll" value="全选">
<input type="button" name="" id="checkNO" value="全不选">
<input type="button" name="" id="checkRev" value="反选">
<input type="button" name="" id="send" value="提交">
</form>
<script type="text/javascript">
$(function(){
$("#checkAll").click(function() {
$("[name=items]:checkbox").prop("checked",true);//全选
});
$("#checkNO").click(function() {
$("[name=items]:checkbox").prop("checked",false);//全不选
});
$("#checkRev").click(function() {
$("[name=items]:checkbox").each(function() {
// $(this).prop("checked",!$(this).attr('checked'));//反选
this.checked=!this.checked;
});
})
$("#send").click(function() {
var str= "";
$("[name=items]:checkbox:checked").each(function() {
str += $(this).val() + "\r\n";
});
alert(str);
});
})
</script>
</body>
</html>
