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

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

var dom=$('.checkbox');

1. 判断checkbox是否被选中

   var dom=$('.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', 'th input:checkbox', function () {
    var that = this;
    $(this).closest('table').find('tr > td:first-child input:checkbox')
        .each(function () {
            this.checked = that.checked;
            //$(this).closest('tr').toggleClass('selected');
        });
});

/**
 * 获取选中的CheckBox值
 * @param Domid      包含checkBox元素的容器id
 * @param delimiters 值的分隔符如：'|',','
 * @returns {string} 返回字符串
 */
bingjs.get_checkbox_value = function (Domid, delimiters) {
    var Id_string = '';//选中的值
    $('#' + Domid).find('tr > td:first-child input: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);
    }
    return Id_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);
                });
            }
        });