點選不同單選按鈕出現不同內容
就我個人來說，我要實現的東西是，稽核某個東西，如果通過則不需要填寫理由，如果稽核不通過則需要填寫理由，出現一個文字域
<!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>