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
;
}
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
}