javascript - 怎么获取并在页面显示radio单选框的值？
本文介绍了javascript - 怎么获取并在页面显示radio单选框的值？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
例如，一个表单 type=radio,有A B C D四个选项，当被单击选中一个选项时，怎么用js获取，并在页面显示出来？
<form action="" class="select" name="Form1">
<div class="radio" >
<label>
<input type="radio" name="questionSelect" value="A" />A.
<span class="question-content">问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题</span>
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="questionSelect" value="B"/>B.
<span class="question-content">问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题</span>
</label>
</div>
</form>
下面是C D怎么用Js获取被选中的选项，并在一个span里面输出？如
<span>你的答案：</span><span id="answerOrder"></span>JQuery也行，在网上找了一些代码都不能很好的实现，新手跪求帮助！Orz
解决方案
这个应该就是你要的效果了，检查选项的checked属性可以判断哪个选项被选中；通过onchange事件绑定即可
<!Doctype html>
<head>
<title>js练习</title>
<meta charset="utf-8">
<script src="jquery.min.js"></script>
</head>
<body>
<form action="" class="select" name="Form1">
<div class="radio" >
<label>
<input onchange="setA()" type="radio" name="questionSelect" value="A" />A.
<span class="question-content">问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题</span>
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="questionSelect" value="B"/>B.
<span class="question-content">问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题</span>
</label>
</div>
</form>
<span>你的答案：</span><span id="answerOrder"></span>
</body>
<script text="text/javascript">
//给单选按钮绑定事件
window.onload=function(){
var ans = document.getElementsByName("questionSelect");
for(var i=0;i<ans.length;i++){
ans[i].onchange=setA;
}
}
//当值改变时把当前选项呈现在指定区域
function setA(){
var ans = document.getElementsByName("questionSelect");
var ord = document.getElementById("answerOrder");
for(var i=0;i<ans.length;i++)
if(ans[i].checked==true){
ord.innerHTML=ans[i].value;
}
}
</script>
</html>这篇关于javascript - 怎么获取并在页面显示radio单选框的值？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
