`
webcode
  • 浏览: 5955519 次
  • 性别: Icon_minigender_1
  • 来自: 上海
文章分类
社区版块
存档分类
最新评论

操作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="#" onclick="selectByID()">选中</a><br>
<a href="#" onclick="unselectByID()">不选</a><br>
<a href="#" onclick="getStatusByID()">获取当前的状态</a>
<hr>
通过元素的名称进行操作<br>
<a href="#" onclick="selectByN()">选中</a><br>
<a href="#" onclick="unselectByN()">不选</a><br>
<a href="#" onclick="getStatusByN()">获取当前的状态</a>
</body>
</html>

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics