原生JS——checkbox操作技巧

JavaScript07

原生JS——checkbox操作技巧,第1张

2.根据type="checkbox"选中所有checkbox

3.修改checkbox选中状态

4.获取checkbox的value

5.一个简单的表格全选框功能实现

注:

1)通过document.querySelectorAll()获得的NodeList类型,要使用for of进行遍历,使用for in会访问到队形自定义的properties

2)classList对应的DOMTokenList类型使用contains检查是否包含特定值

推荐使用兼容浏览器方式。

根据W3C的表单规范 ,在checked属性是一个布尔属性,这意味着只要该 attribute 存在,即使它没有值,或是一个空字符串,该属性对应的 property 就是 true。以下是兼容浏览器方式,判断 checkbox 元素的 checked 属性是否为"真" 的方法:

代码如下:

if ( elem.checked )

if ( $(elem).prop("checked") )

if ( $(elem).is(":checked") )

如果你使用jQuery 1.6 ,代码if ( $(elem).attr("checked") ),将获得一个属性(attribute) ,它不改变该复选框被选中和选中。它只是用来存储默认或选中属性的初始值。为了保持向后兼容,.attr() 方法从 jQuery 1.6.1+ 开始除了返回属性值外,还会更新 property 属性,因此 boolean attribute(布尔属性)不需要通过 .prop() 来改变其值。

有很多种方法啊,一般常用的有两种。

一是给定id,用getElementById(id号)来获取,如果有多个复选框可以依据具体情况设定不同id以区别。如:

<input

type="checkbox"

id="chk1"

/>

<input

type="checkbox"

id="chk2"

/>

<input

type="checkbox"

id="chk3"

/>

获取时只需要document.getElementById("chk1")。

还有一种是这种情况:

<div

id="container">

<input

type="checkbox"

value="aaa"

/>

<input

type="checkbox"

value="bbb"

/>

<input

type="checkbox"

value="ccc"

/>

</div>

这时可以先获取复选框的父级,再利用索引获取需要的复选框。

比如现在要获取上方第二个checkbox,就可以这样做:

var

checkboxArr

=

document.getElementById("container").getElementsByTagName("input")

那么第二个checkbox就是checkboxArr[1](索引是从0开始的)。

获取到需要的checkbox之后只需设置其checked属性为true就行了。如:

document.getElementById("chk1").checked

=

true

checkboxArr[1].checked

=

true