checkbox操作方法详解-优快云博客

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>checkbox用法</title>
<script type="text/javascript" src="jquery-1.2.1.js"></script>
<script>
//第一种选中的方式 : 根据元素的ID获取元素 id不能重复所以直接查找到的是元素本身
function selectByID() {
document.getElementById("c1").checked = true;
}
function unselectByID() {
document.getElementById("c1").checked = false;
}
function getStatusByID() {
alert(document.getElementById("c1").checked ? true : false);
}

//第二种选中的方式 : 根据元素的名称获取元素元素的名称可以重复,所以如果想要精确的找到某个元素必须要加上它的下标
function selectByN() {
document.getElementsByName("c1")[0].checked= true;
}
function unselectByN() {
document.getElementsByName("c1")[0].checked = false;
}
function getStatusByN() {
alert(document.getElementsByName("c1")[0].checked ? true : false);
}
</script>

</head>
<body>
<input type="checkbox" id="c1" name="c1"><br>
通过元素的ID进行操作<br>
<a href="#" οnclick="selectByID()">选中</a><br>
<a href="#" οnclick="unselectByID()">不选</a><br>
<a href="#" οnclick="getStatusByID()">获取当前的状态</a>
<hr>
通过元素的名称进行操作<br>
<a href="#" οnclick="selectByN()">选中</a><br>
<a href="#" οnclick="unselectByN()">不选</a><br>
<a href="#" οnclick="getStatusByN()">获取当前的状态</a>
</body>
</html>

操作checkbox