checkbox系列

1.解决checkbox属性checked为true但是未被选中的问题（转）

原来是jQuery版本问题。

 

Attributes vs. Properties

 

attributes和properties之间的差异在特定情况下是很重要。jQuery 1.6之前 ，.attr()方法在取某些 attribute 的值时，会返回 property 的值，这就导致了结果的不一致。从 jQuery 1.6 开始， .prop()方法 方法返回 property 的值,而.attr() 方法返回 attributes 的值。

例如, selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, 和 defaultSelected应使用.prop()方法进行取值或赋值。 在jQuery1.6之前，这些属性使用.attr()方法取得，但是这并不是元素的attr属性。他们没有相应的属性（attributes），只有特性(property)。

 $(function(){  

  

            $("#checkall").click(function(){  

                if(this.checked){  

                    $(".checkbox input[type=checkbox]").prop("checked",true);  

                }else{  

                    $(".checkbox input[type=checkbox]").prop("checked",false);  

                }  

            });  

  

            $("#checkback").click(function(){  

                var back = $(".checkbox input[type=checkbox]");  

                back.each(function(){  

                    console.log(this.checked);  

                    if( this.checked ){  

                        $(this).prop("checked",false);  

                    }else{  

                        $(this).prop("checked",true);  

                    }  

                      

                });  

            });  

 

        })  

 

2.复选框样式修改方法（转）

复选框checkbox的默认样式很难看，以前一直没有改过，现在查到很多资料，发现利用图片+css3改变复选框是最简单的方法；代码如下

input[type= "checkbox" ] {

   -webkit-appearance:  none ;   /*清除复选框默认样式*/

   background :  #fff  url (i/ blue .png);    /*复选框的背景图，就是上图*/

   height :  22px ;    /*高度*/

   vertical-align :  middle ;

   width :  22px ;

}

input[type= "checkbox" ]:checked {

   background-position :  -48px  0 ;

}

3.jQuery获取select中选中的option的值和自定义属性的值（转）

使用jQuery获取获取select下拉框中option的值：

//通过绑定change事件，当下拉框内容发生变化时事件被启动 $( "#wlms" ).bind( "change" , function(){ //获取被选中的option的值 var miaoshu = $( this ).val(); //获取自定义属性的值 var bianhao = $( this ).find( "option:selected" ).attr( "bianhao" ); });

其中获取自定义属性的值部分，在HTML中部分是：

...... <option bianhao="abc"></option> ......

 

4.jQuery判断checkbox是否选中的3种方法
（转：具体差异待研究）

方法一：
if ($("#checkbox-id")get(0).checked) {
    // do something
}

方法二：
if($('#checkbox-id').is(':checked')) {
    // do something
}

 

方法三：
if ($('#checkbox-id').attr('checked')) {
    // do something
}