JavaScript、jQuery获取单选框(radio)的选中值
一、要获取选中值的表单
HTML代码:
<div id="todoanswer" style="position: fixed;width: 80%;height: 80%;top: 5%;left: 10%;border: 1px solid #000;z-index: 999;background-color: #FFF;display: none">
<input id="closeanswer" type="button" class="ui-button" style="float: right;height: 36px;width: 10%;
background-color: #ccc"
value="关闭 X"><br>
<div>
<span>1.概括一下核聚变的磁约束方式:</span>
<div><input type="radio" name="selectOne-1" value="0">(A)我知道</div>
<div><input type="radio" name="selectOne-1" value="1">(B)我不知道</div>
<div><input type="radio" name="selectOne-1" value="2">(C)我怎么知道</div>
<div><input type="radio" name="selectOne-1" value="3">(D)我知道才不对劲</div>
</div>
<div>
<span>2.黑洞与白洞的内在联系是:</span>
<div><input type="radio" name="selectOne-2" value="0">(A)我不知道</div>
<div><input type="radio" name="selectOne-2" value="1">(B)我肯定不知道</div>
<div><input type="radio" name="selectOne-2" value="2">(C)我怎么可能知道</div>
<div><input type="radio" name="selectOne-2" value="3">(D)我知道才不对劲</div>
</div>
<div>
<span>3.时光机是什么时间发明的:</span>
<div><input type="radio" name="selectOne-3" value="0">(A)我不知道</div>
<div><input type="radio" name="selectOne-3" value="1">(B)我肯定不知道</div>
<div><input type="radio" name="selectOne-3" value="2">(C)我怎么可能知道</div>
<div><input type="radio" name="selectOne-3" value="3">(D)我知道才不对劲</div>
</div>
<div>
<span>4.穿越到异世界的第一件事是什么:</span>
<div><input type="radio" name="selectOne-3" value="0">(A)我不知道</div>
<div><input type="radio" name="selectOne-3" value="1">(B)我肯定不知道</div>
<div><input type="radio" name="selectOne-3" value="2">(C)我怎么可能知道</div>
<div><input type="radio" name="selectOne-3" value="3">(D)我知道才不对劲</div>
</div>
<div>
<span>5.地球固态物理学有几种流派:</span>
<div><input type="radio" name="selectOne-3" value="0">(A)我不知道</div>
<div><input type="radio" name="selectOne-3" value="1">(B)我肯定不知道</div>
<div><input type="radio" name="selectOne-3" value="2">(C)我怎么可能知道</div>
<div><input type="radio" name="selectOne-3" value="3">(D)我知道才不对劲</div>
</div>
<input id="sureanswer" type="button" class="ui-button" value="提交">
</div>
二、处理表单的JS
1.显示及隐藏:
$(document).on('click', '#answer', function(){
$("#todoanswer").show();
});
$(document).on('click', '#closeanswer', function(){
$("#uponeimage").hide();
});
2.读取单选值:
var pthis = $(this);//定位jQuery的$的位置为当前表单
var select_1 = pthis.parents().find("input[name='selectOne-1']");
var select_1_cho;
for(var i=0; i<4; i++){
if(select_1[i].checked){
select_1_cho = select_1[i].value;
break;
}
}
var select_2 = pthis.parents().find("input[name='selectOne-2']");
var select_2_cho;
for(var i=0; i<4; i++){
if(select_2[i].checked){
select_2_cho = select_2[i].value;
break;
}
}
var select_3 = pthis.parents().find("input[name='selectOne-3']");
var select_3_cho;
for(var i=0; i<4; i++){
if(select_3[i].checked){
select_3_cho = select_3[i].value;
break;
}
}
var select_4 = pthis.parents().find("input[name='selectOne-4']");
var select_4_cho;
for(var i=0; i<4; i++){
if(select_4[i].checked){
select_4_cho = select_4[i].value;
break;
}
}
var select_5 = pthis.parents().find("input[name='selectOne-5']");
var select_5_cho;
for(var i=0; i<4; i++){
if(select_5[i].checked){
select_5_cho = select_5[i].value;
break;
}
}
三、相关扩展
由于只有五个单选,所以我使用的是五段相似的for循环进行处理,实际上可以外层再套for循环使得可以从1-5遍历单选框,实现代码复用,如:
var select = [];
for(var i = 0; i < 5; i ++){
var one = pthis.parents().find("input[name='selectOne-" + i + "']");
var cho;
for(var i=0; i<4; i++){
if(one[i].checked){
cho = one[i].value;
break;
}
}
select.push(cho);
}