radio 切换内容

最新推荐文章于 2022-11-24 15:33:08 发布

weixin_30642267

最新推荐文章于 2022-11-24 15:33:08 发布

阅读量171

点赞数

文章标签： javascript ViewUI

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

版权

<!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 οnclick="ex()" checked="checked" id="users" class="radio" type="radio" name="object" value="0" />
<label for="users">非用户组</label>
<input οnclick="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>