radio 切换内容

使用JavaScript控制页面显示的内容

最新推荐文章于 2022-03-09 11:21:43 发布

weixin_30642267

最新推荐文章于 2022-03-09 11:21:43 发布

阅读量196

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/wangzaixiaomaotou/p/4903025.html

本文介绍了如何通过JavaScript操作HTML元素来控制页面上不同内容的显示与隐藏，具体包括使用radio按钮选择不同的用户组，并根据选择展示对应的内容块。

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>test</title>
<script type="text/javascript">
window.onload = function() {
var radios = document.getElementsByName('object');
for (var i = 0; i < radios.length; i++) {
radios[i].indexs = i + 1;
radios[i].onchange = function () {
if (this.checked) {
document.getElementById("id1").style.display="none";
document.getElementById("id2").style.display="none";
document.getElementById("id" + this.indexs).style.display="block";
}
}
}
}
function ex(){
if(document.getElementById("usergroup").checked==true)
{
alert(1);
}else{
alert(2);
}
}
</script>
</head>
<body>
<table>
<tr>
<td>
<input onclick="ex()" checked="checked" id="users" class="radio" type="radio" name="object" value="0" />
<label for="users">非用户组</label>
<input onclick="ex()" id="usergroup" class="radio" type="radio" name="object" value="1" />
<label for="usergroup">用户组</label>
</td>
</tr>
<tr>
<td>
<span id="id1" style="display: block;">内容1</span>
<span id="id2" style="display: none;">内容2</span>
</td>
</tr>
</table>
</body>
</html>