一.方法
1.jquery判断checked的三种方法:
.attr('checked); //看版本1.6+返回:”checked”或”undefined” ;1.5-返回:true或false
.prop('checked'); //16+:true/false
.is(':checked'); //所有版本:true/false//别忘记冒号哦
2.jquery赋值checked的几种写法:
所有的jquery版本都可以这样赋值:
// $("#cb1").attr("checked","checked");
// $("#cb1").attr("checked",true);
jquery1.6+:prop的4种赋值:
// $("#cb1″).prop("checked",true);//很简单就不说了哦
// $("#cb1″).prop({checked:true}); //map键值对
// $("#cb1″).prop("checked",function(){
return true;//函数返回true或false
});
//记得还有这种哦:$("#cb1″).prop("checked","checked");
二.简单操作
1.反选
$(‘[name=foods]:checkbox’).each(function){
$(this).attr(“checked”,!$(this).attr(“checked”));
或是:
This.checked=!this.checked ;
}
2.全选
$(‘[name=foods]:checkbox’).attr(‘checkbox’,’true’);
$(‘[name=foods]:checkbox’).attr(‘checkbox’,’false’); //全不选
3.选中的个数
$(‘[name=foods]:checkbox:checkbox’).each(function){
Str =$(this).val();
}
4.选中删除
$ (".del").click(function(){
$ (":checked").parent().parent().remove();
//隐藏所有被选中的input元素
/ /parent() 获得当前匹配元素集合中每个元素的父元素,
})
5.全选/全不选
$('#check-all1').click(function(event){
if($(this).prop("checked") == true){
$(this).parent().parent().parent().find("input[name='items']").prop("checked", true);
}else{
$(this).parent().parent().parent().find("input[name='items']").prop("checked", false);
}
})
6.全选/全不选(checkedALL)(当一个foods复选框没有选择时,这个复选框就没有打勾)
$ ("input[name='items']").click(function(){
var $tmp=$ ("input[name='items']");
if($tmp.length==$tmp.filter(':checked').length){
$ ('.check-all').attr('checked',true);
}else{
$ ('.check-all').attr('checked',false);
}
});
三.例子
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
html,body,div,ul,li,button,label{
margin: 0;
padding: 0;
}
a{text-decoration: none;}
.formcnt{
width: 200px;
margin:50px auto;
}
.formcnt-row{
width: 100%;
margin-bottom: 10px;
}
.all-btn{
width: 65px;
text-align: center;
background: #ffa800;
color: #fff;
line-height: 30px;
display: inline-block;
border-radius: 5px;
}
.all-btn>label{
display: inline-block;
width: 100%;
}
.del-btn{
width: 70px;
background: #ccc;
line-height: 30px;
text-align: center;
display: inline-block;
}
</style>
</head>
<body>
<form action="" method="get" class="formcnt">
<h2>您喜欢的水果?</h2>
<div class="formcnt-row"><label><input name="Fruit" type="checkbox" value="" />苹果 </label></div>
<div class="formcnt-row"><label><input name="Fruit" type="checkbox" value="" />桃子 </label></div>
<div class="formcnt-row"><label><input name="Fruit" type="checkbox" value="" />香蕉 </label> </div>
<div class="formcnt-row"><label><input name="Fruit" type="checkbox" value="" />梨 </label> </div>
<div class="btncnt">
<div class="all-btn">
<label><input class="all-check" name="all" type="checkbox" value="" />全选 </label>
</div>
<div class="del-btn">删除</div>
</div>
</form>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.formcnt').each(function(){
var _this=$(this);
//全选
$(_this).find('.all-check').click(function(){
if($(this).is(':checked')){
$(_this).find("input[name='Fruit']").each(function(i,k){
$(k).prop('checked',true);
})
}else{
$(_this).find("input[name='Fruit']").each(function(i,k){
$(k).prop('checked',false);
})
}
})
//复选框单击
$(_this).find('.formcnt-row label').each(function(){
$(this).click(function(){
var $tmp=$(this).parent().parent().find("input[name='Fruit']");
if($tmp.length==$tmp.filter(':checked').length){
$(_this).find('.all-check').prop('checked',true);
}else{
$(_this).find('.all-check').prop('checked',false);
}
});
})
$ (".del-btn").click(function(){
$(_this).find('.formcnt-row label input:checked').parent().parent().remove();
//隐藏所有被选中的input元素
//parent() 获得当前匹配元素集合中每个元素的父元素,
})
});
});
</script>
</body>
</html>