复选框的行使

<!DOCTYPE html>
<html>
<head>
<title></title>
<script type=”text/javascript”
src=”js/jquery-3.2.0.min.js”></script>
</head>
<body>
<form>
您的喜欢是做什么?
<input type=”checkbox” name=”” id=”checkAll”
value=”全选/全不选”>全选/全不选<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” name=”” id=”send” value=”提交”>
</form>
<script type=”text/javascript”>
$(function(){
$(“#checkAll”).click(function() {
// $(“[name=items]:checkbox”).prop(‘checked’, this.checked)
if(!this.checked){
$(“[name=items]:checkbox”).prop(‘checked’,false);
}else{
$(“[name=items]:checkbox”).prop(‘checked’,true);
}
});
// 方法1
$(“[name=items]:checkbox”).click(function() {
var flag=true;
$(“[name=items]:checkbox”).each(function() {
if(!this.checked){
flag=false;//循环复选框组,当没有被入选的项时,则把变量flag的值设置为flase;
}
});
alert(flag);
$(“#checkAll”).prop(‘checked’, flag);
});
//方法二:判断复选框的总和是不是与选中复选框数量也等于
// $(“[name=items]:checkbox”).click(function() {
// var $tmp=$(“[name=items]:checkbox”);
// $(“#checkAll”).attr(‘checked’,
$tmp.length==$tmp.filter(“:checked”).length);
// });
})
</script>

<!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=”提交”>

</body>
</html>

</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>