如何缩短此JavaScript代码？

Question

I am a beginner to JavaScript. I need a function that adds the value of all three groups of radio buttons selected as shown in the image attached. See the image below. I have tried the code as shown below.

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

// add all the options that is currently selected and output is placed in another 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>

I think that storing all the selected radio buttons value in an array and then adding the subsequent array elements based on selection would work, but i do not know how to execute it. Here is the HTML code as well

 <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>

Answer 1

What's about something like this? (Example)

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