我是JavaScript的初学者。我需要一个函数,该函数可以将所选的所有三组单选按钮的值相加,如下图所示。参见下图。我已经尝试了如下所示的代码。
This is how the selection options look
function nodisplay(){
// getting the values of all radio buttons using id
var opt1 = document.getElementById("option1");
var opt2 = document.getElementById("option2");
var opt3 = document.getElementById("option3");
var opt4 = document.getElementById("option4");
var opt5 = document.getElementById("option5");
var opt6 = document.getElementById("option6");
var opt7 = document.getElementById("option7");
var opt8 = document.getElementById("option8");
var opt9 = document.getElementById("option9");
var opt10 = document.getElementById("option10");
var drap = document.getElementById("totally");
//添加当前选择的所有选项,并将输出放置在另一个div
if(opt1.checked){
drap.innerHTML = parseInt(opt1.value);
} if(opt1.checked && opt3.checked){
drap.innerHTML = parseInt(opt1.value) + parseInt(opt2.value);
}if(opt1.checked && opt3.checked && opt8.checked){
drap.innerHTML = parseInt(opt1.value) + parseInt(opt3.value) + parseInt(opt8.value);
}if(opt1.checked && opt4.checked && opt8.checked){
drap.innerHTML = parseInt(opt1.value) + parseInt(opt4.value) + parseInt(opt8.value);
} if(opt1.checked && opt5.checked && opt8.checked){
drap.innerHTML = parseInt(opt1.value) + parseInt(opt5.value) + parseInt(opt8.value);
} if(opt1.checked && opt6.checked && opt8.checked){
drap.innerHTML = parseInt(opt1.value) + parseInt(opt6.value) + parseInt(opt8.value);
} if(opt1.checked && opt7.checked && opt8.checked){
drap.innerHTML = parseInt(opt1.value) + parseInt(opt7.value) + parseInt(opt8.value);
} if(opt1.checked && opt3.checked && opt9.checked){
drap.innerHTML = parseInt(opt1.value) + parseInt(opt3.value) + parseInt(opt9.value);
} if(opt1.checked && opt4.checked && opt9.checked){
drap.innerHTML = parseInt(opt1.value) + parseInt(opt4.value) + parseInt(opt9.value);
} if(opt1.checked && opt5.checked && opt9.checked){
drap.innerHTML = parseInt(opt1.value) + parseInt(opt5.value) + parseInt(opt9.value);
} if(opt1.checked && opt6.checked && opt9.checked){
drap.innerHTML = parseInt(opt1.value) + parseInt(opt6.value) + parseInt(opt9.value);
} if(opt1.checked && opt7.checked && opt9.checked){
drap.innerHTML = parseInt(opt1.value) + parseInt(opt7.value) + parseInt(opt9.value);
} if(opt1.checked && opt3.checked && opt10.checked){
drap.innerHTML = parseInt(opt1.value) + parseInt(opt3.value) + parseInt(opt10.value);
} if(opt1.checked && opt4.checked && opt10.checked){
drap.innerHTML = parseInt(opt1.value) + parseInt(opt4.value) + parseInt(opt10.value);
} if(opt1.checked && opt5.checked && opt10.checked){
drap.innerHTML = parseInt(opt1.value) + parseInt(opt5.value) + parseInt(opt10.value);
} if(opt1.checked && opt6.checked && opt10.checked){
drap.innerHTML = parseInt(opt1.value) + parseInt(opt6.value) + parseInt(opt10.value);
} if(opt1.checked && opt7.checked && opt10.checked){
drap.innerHTML = parseInt(opt1.value) + parseInt(opt7.value) + parseInt(opt10.value);
}
}
</script>
我认为将所有选定的单选按钮值存储在数组中,然后根据选择添加后续的数组元素是可行的,但是我不知道如何执行它。这也是HTML代码
<div class="radio">
<input type="radio" id="option1" name="optradio" onchange="nodisplay()" value="3000"> <label> Gallery Wrap </label> </div>
<div class="radio"> <input type="radio" id="option3" value="700" name="optradio2" onclick="nodisplay()"> <label>20x16 </label> </div>
<div class="radio"> <input type="radio" id="option4" value="900" name="optradio2" onclick="nodisplay()"> <label>24x19 </label> </div>
<div class="radio"> <input type="radio" id="option5" value="1150" name="optradio2" onclick="nodisplay()"> <label>30x24 </label> </div>
<div class="radio"> <input type="radio" id="option6" value="2340" name="optradio2" onclick="nodisplay()"> <label>36x29 </label> </div>
答案 0 :(得分:0)
这是怎么回事? (示例)
function nodisplay() {
var el1 = document.querySelector('input[name="optradio1"]:checked');
var el2 = document.querySelector('input[name="optradio2"]:checked');
var el3 = document.querySelector('input[name="optradio3"]:checked');
var r1 = el1 ? parseInt(el1.val) : 0;
var r2 = el2 ? parseInt(el2.val) : 0;
var r3 = el3 ? parseInt(el3.val) : 0;
document.getElementById('totally').innerHTML = r1 + r2 + r3;
}