jquery复选框 选中事件 及其判断是否被选中_常用笔记

checkbox的change事件可监听是否选中状态，也可添加onclick事件。

vardom=$('.checkbox');

1.判断checkbox是否被选中

vardom=$('.checkbox');

dom.prop('checked');

//实现控制checkbox是否选中状态:切换到初始状态
　　if(!(dom.prop('checked'))){
　　dom.prop('checked',!(dom.prop('checked')));
　　dom.prop('checked',dom.prop('checked'));
　　}else{
　　dom.prop('checked',dom.prop('checked'));
　　dom.prop('checked',!(dom.prop('checked')));
　　}

2.判断checkbox是否被选中

　　dom.is(':checked')

3.设置是否选中状态

dom.prop('checked'，true);

dom.prop('checked'，false);

//全选按钮
$(document).on('click','thinput:checkbox',function(){
varthat=this;
$(this).closest('table').find('tr>td:first-childinput:checkbox')
.each(function(){
this.checked=that.checked;
//$(this).closest('tr').toggleClass('selected');
});
});

/**
*获取选中的CheckBox值
*@paramDomid包含checkBox元素的容器id
*@paramdelimiters值的分隔符如：'|',','
*@returns{string}返回字符串
*/
bingjs.get_checkbox_value=function(Domid,delimiters){
varId_string='';//选中的值
$('#'+Domid).find('tr>td:first-childinput:checkbox')
.each(function(){
//this与$(this)的区别一个是dom一个是jquery对象
if(this.checked==true){
Id_string+=$(this).val()+delimiters;

}
});
//console.info(Id_string.indexOf(delimiters));
//console.info(Id_string);
if(Id_string.lastIndexOf(delimiters)){
Id_string=Id_string.substr(0,Id_string.length-1);
}
returnId_string;
}

1.通过attr('checked','checked')来设置checkbox时，重复点击，虽然checked属性设置正确，但是checkbox没有被勾选，如下代码：（代码是全选功能）

$('#ckAll').click(function(){
if($('#ckAll').attr('checked')=='checked'){
$('#ckAll').removeAttr('checked');
}else{
$('#ckAll').attr('checked','checked');
}
if($('#ckAll').attr('checked')=='checked'){
$('.tab-list.ckbox').each(function(i,n){
$(n).attr('checked','checked');
});
}else{
$('.tab-list.ckbox').each(function(i,n){
$(n).removeAttr('checked');
});
}
});

2.换成prop('checked',true)，当ckAll被选中时，所有列表checkbox都会被选中

$('#ckAll').click(function(){
if($('#ckAll').prop('checked')){
$('.tab-list.ckbox').each(function(i,n){
$(n).prop('checked',true);
});
}else{
$('.tab-list.ckbox').each(function(i,n){
$(n).prop('checked',false);
});
}
});