原生JS——checkbox操作技巧

JavaScript019

原生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检查是否包含特定值

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns=" http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />

<title>无标题文档</title>

</head>

<script language="javascript" type="text/javascript">

function aa()

{

var val=document.getElementById("checkbox")

var inp=document.getElementById("inp")

if(val.checked==true)

{

inp.value=val.value

}

else

{

inp.value=""

}

}

</script>

<body>

<form id="form1" name="form1" method="post" action="">

<label>

<input type="checkbox" name="checkbox" id="checkbox" value="我被你点了!" onclick="aa()" />

</label>

<label>

<input type="text" name="textfield" id="inp" />

</label>

</form>

</body>

</html>

我就做了一个checkbox,选中checkbox,就在文本框中显示cehekbox的值,不选中,就取消显示。

1、获取对象 document.getElementById()

2、根据获取的对象取得checkbox的值document.getElementById().value