本文介绍了一种基于jQuery的实现方案，该方案允许用户在选择审核通过时隐藏文本输入域，在选择审核不通过时显示文本输入域以供填写驳回原因。
就我个人来说，我要实现的东西是，审核某个东西，如果通过则不需要填写理由，如果审核不通过则需要填写理由，出现一个文本域
<!DOCTYPE html>
<html><head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery.min.js"></script>
</head>
<body>
<div style="font-size:18px;">
<input type="radio" name="test" value="0" >审核通过
<input type="radio" name="test" value="1">驳回
</div>
<div id="test">
<div> </div>
<div><textarea style="width:450px;height:130px" placeholder="驳回原因填写..."></textarea></div>
</div>
</body>
<script>
$("#test div:last").hide(); // 先隐藏第二组文本框
$(":radio").click(function() {
var num = $(this).val(); // 当前按钮的value值对应需要显示文本框的位置
$("#test div").hide(); // 先隐藏所有文本框
$("#test div").eq(num).show(); // 然后显示对应的文本框
});
</script>
</html>
效果图如下：
还有一种更易理解的方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery.min.js"></script>
</head>
<body>
<div style="font-size:18px;" >
<input type="radio" name="test" onclick="ch('yes')">审核通过
<input type="radio" name="test" onclick="ch('no')">驳回
</div>
<div>
<div id="0"></div>
<div id="1"><textarea style="width:450px;height:130px" placeholder="驳回原因填写..."></textarea></div>
</div>
</body>
<script>
function ch(tag){
var a=document.getElementById("0");
var b=document.getElementById("1");
if(tag=='yes'){
a.style.display="block";
b.style.display="none";
}
else{
a.style.display="none";
b.style.display="block";
}
}
</script>
</html>
扫一扫
3524
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
