您的位置:首页 > Web前端 > JQuery

jQuery 操作复选框(checkbox) 真正的方法

2014-02-18 10:34 435 查看

使用attr第一次起作用,第二次就不起作用了,原因是改变此属性的时候浏览器可能产生错误而被jquery忽略了,jquery提供了prop解决此问题,在针对元素集的时候使用此属性

解决方法如下:
$("#checkAll").click(function(){
$('input[name="templateCheckbox"]').prop("checked",this.checked);
})
var $templateCheckbox = $("input[name='templateCheckbox']");
$templateCheckbox.click(function(){
var checkedflag = ($templateCheckbox.length == $("input[name='templateCheckbox']:checked").length);
$("#checkAll").prop("checked",checkedflag);
});


prop(name|properties|key,value|fn)

概述

获取在匹配的元素集中的第一个元素的属性值。

随着一些内置属性的DOM元素或window对象,如果试图将删除该属性,浏览器可能会产生错误。jQuery第一次分配undefined值的属性,而忽略了浏览器生成的任何错误

参数

name StringV1.6

属性名称

properties MapV1.6

作为属性的“名/值对”对象

key,value String,ObjectV1.6

属性名称,属性值

key,function(index, attr) String,FunctionV1.6

1:属性名称。

2:返回属性值的函数,第一个参数为当前元素的索引值,第二个参数为原先的属性值。

示例

参数name 描述:

选中复选框为true,没选中为false

jQuery 代码:
$("input[type='checkbox']").prop("checked");

参数properties 描述:

禁用页面上的所有复选框。

jQuery 代码:
$("input[type='checkbox']").prop({
disabled: true
});

参数key,value 描述:

禁用和选中所有页面上的复选框。

jQuery 代码:
$("input[type='checkbox']").prop("disabled", false);
$("input[type='checkbox']").prop("checked", true);

参数key,回调函数 描述:

通过函数来设置所有页面上的复选框被选中。

jQuery 代码:
$("input[type='checkbox']").prop("checked", function( i, val ) {
return !val;
});
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: