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
}