Bootstrap

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);
}
;