添加单选按钮的值

时间:2017-06-21 22:24:23

标签: javascript jquery html

我正在整理一份调查问卷,其中每个问题都有4个选项,即单选按钮。单选按钮附加了一个值,按照我需要的方式加权。我有一个javascript函数,当我选择一个单选按钮时,它会更改值,但是,即使首次加载页面,值也会因为某些原因从75开始。我需要第一个问题1A的值为0,3或5,然后一旦问题1B被回答,值变为0,3,5,6,8或10.换句话说,新选择的值无线电被添加到1A的无线电值的值。以下是我表格中的前几个问题。

<div class="panel-group" id="accordion1" role="tablist" aria-multiselectable="true">
    <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="headingOneA">
            <h4 class="panel-title">
            <a role="button" data-toggle="collapse" data-parent="#accordion1" href="#collapseOneA" aria-expanded="true" aria-controls="collapseOneA">
               <span class="letter">a</span> Question 1A
            </a>
            </h4>
        </div>
        <div id="collapseOneA" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOneA">
            <div class="panel-body">
                <label>
                    <input class="calc" type="radio" name="optionsRadios1" id="optionsRadios11A" value="5" checked>
                    YES
                </label>
                <label>
                    <input class="calc" type="radio" name="optionsRadios1" id="optionsRadios21A" value="0">
                    NO
                </label>
                <label>
                    <input class="calc" type="radio" name="optionsRadios1" id="optionsRadios31A" value="3">
                    PARTIAL
                </label>
                <label>
                    <input class="calc" type="radio" name="optionsRadios1" id="optionsRadios41A" value="0">
                    UNSURE
                </label>
              </div>
            </div>
          </div>
          <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="headingTwoA">
              <h4 class="panel-title">
                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion1" href="#collapseTwoA" aria-expanded="false" aria-controls="collapseTwoA">
                  <span class="letter">b</span> Question 1B
                </a>
              </h4>
            </div>
            <div id="collapseTwoA" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwoA">
              <div class="panel-body">
                  <label>
                    <input class="calc" type="radio" name="optionsRadios2" id="optionsRadios11B" value="5" checked>
                    YES
                  </label>
                  <label>
                    <input class="calc" type="radio" name="optionsRadios2" id="optionsRadios21B" value="0">
                    NO
                  </label>
                  <label>
                    <input class="calc" type="radio" name="optionsRadios2" id="optionsRadios31B" value="3">
                    PARTIAL
                  </label>
                  <label>
                    <input class="calc" type="radio" name="optionsRadios2" id="optionsRadios41B" value="0">
                    UNSURE
                  </label>
              </div>
          </div>
      </div>
      <div class="panel panel-default">
          <div class="panel-heading" role="tab" id="headingThreeA">
              <h4 class="panel-title">
                  <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion1" href="#collapseThreeA" aria-expanded="false" aria-controls="collapseThreeA">
                  <span class="letter">c</span> Question1C
                  </a>
              </h4>
          </div>
          <div id="collapseThreeA" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThreeA">
              <div class="panel-body">
                  <label>
                      <input class="calc" type="radio" name="optionsRadios3" id="optionsRadios11C" value="5" checked>
                    YES
                  </label>
                  <label>
                      <input class="calc" type="radio" name="optionsRadios3" id="optionsRadios21C" value="0">
                    NO
                  </label>
                  <label>
                      <input class="calc" type="radio" name="optionsRadios3" id="optionsRadios31C" value="3">
                    PARTIAL
                  </label>
                  <label>
                      <input class="calc" type="radio" name="optionsRadios3" id="optionsRadios41C" value="0">
                    UNSURE
                  </label>
              </div>
          </div>
      </div>
      <div class="panel panel-default">
          <div class="panel-heading" role="tab" id="headingFourA">
              <h4 class="panel-title">
                  <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion1" href="#collapseFourA" aria-expanded="false" aria-controls="collapseFourA">
                  <span class="letter">d</span> Question 1D
                  </a>
              </h4>
          </div>
          <div id="collapseFourA" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFourA">
              <div class="panel-body">
                  <label>
                      <input class="calc" type="radio" name="optionsRadios4" id="optionsRadios11D" value="5" checked>
                    YES
                  </label>
                  <label>
                      <input class="calc" type="radio" name="optionsRadios4" id="optionsRadios21D" value="0">
                    NO
                  </label>
                  <label>
                      <input class="calc" type="radio" name="optionsRadios4" id="optionsRadios31D" value="3">
                    PARTIAL
                  </label>
                  <label>
                      <input class="calc" type="radio" name="optionsRadios4" id="optionsRadios41D" value="0">
                    UNSURE
                  </label>
              </div>
          </div>
      </div>
      <div class="panel panel-default">
          <div class="panel-heading" role="tab" id="headingFiveA">
              <h4 class="panel-title">
                  <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion1" href="#collapseFiveA" aria-expanded="false" aria-controls="collapseFiveA">
                  <span class="letter">e</span> Question 1E
                  </a>
              </h4>
          </div>
          <div id="collapseFiveA" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFiveA">
              <div class="panel-body">
                  <label>
                      <input class="calc" type="radio" name="optionsRadios5" id="optionsRadios11E" value="5" checked>
                    YES
                  </label>
                  <label>
                      <input class="calc" type="radio" name="optionsRadios5" id="optionsRadios21E" value="0">
                    NO
                  </label>
                  <label>
                      <input class="calc" type="radio" name="optionsRadios5" id="optionsRadios31E" value="3">
                    PARTIAL
                  </label>
                  <label>
                      <input class="calc" type="radio" name="optionsRadios5" id="optionsRadios41E" value="0">
                    UNSURE
                  </label>
              </div>
          </div>
      </div>
  </div>

这是我的javascript函数:

function calcscore(){
    var score = 0;
    $(".calc:checked").each(function(){
        score+=parseInt($(this).val(),10);
    });
    $("input[name=sum]").val(score)
}
$().ready(function(){
    $(".calc").change(function(){
       calcscore()
    });
});

我把我的代码粘贴到JSFiddle中:

https://jsfiddle.net/Dhaderlie/bkdqaxnL/

如果你测试表格,你会看到我得到的奇怪价值观。

2 个答案:

答案 0 :(得分:2)

您的代码是正确的。

在文档就绪时,您将获得所有已检查值的总和。考虑到当您加载页面时,总是检查所有单选按钮,您只需获取所有选中值的总和。

您只需从单选按钮中删除checked属性,就可以在回答问题时正确更新结果。

在下面的jsfiddle中,我刚刚更改了你的第二个问题中移除checked属性的示例,这次你的输出从70开始(因为如果选中,第二个答案得到5分)

https://jsfiddle.net/bkdqaxnL/2/

我希望它有意义

答案 1 :(得分:1)

您的代码中有两个错误:

  • 首先,你打算准备不上文件
  • 其次,您已预先检查了值。因此,当加载页面时,这些将被计算在内。您可以使用值0
  • 预先检查收音机

所以代码将是:

function calcscore() {
  var score = 0;
  $(".calc:checked").each(function() {
    score += parseInt($(this).val(), 10);
  });
  $("input[name=sum]").val(score)
}
$(document).ready(function() {
  $(".calc").change(function() {
    calcscore()
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container-fluid">
  <div class="row">
    <div class="col-xs-12 readyImageRow">
      <h3 class="text-center readyTitle">Are You Ready?</h3>
      <p class="text-center readyExplanation">Know where you stand</p>
    </div>
  </div>
</div>
<div class="container-fluid">
  <div class="row surveyOpen">
    <h2 class="surveyTitle text-center">ASSESSMENT</h2>
  </div>
</div>
<div class="container-fluid">
  <div class="row">
    <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
      <!-- Collapse group 1 -->
      <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="headingOne">
          <h4 class="panel-title">
            <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
              <h4><b class="number">1</b> Question 1</h4>
            </a>
          </h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
          <div class="panel-body">
            <!-- Question group 1 -->
            <div class="panel-group" id="accordion1" role="tablist" aria-multiselectable="true">
              <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="headingOneA">
                  <h4 class="panel-title">
                    <a role="button" data-toggle="collapse" data-parent="#accordion1" href="#collapseOneA" aria-expanded="true" aria-controls="collapseOneA">
                      <span class="letter">a</span> Question 1A
                    </a>
                  </h4>
                </div>
                <div id="collapseOneA" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOneA">
                  <div class="panel-body">
                    <label>
                      <input class="calc" type="radio" name="optionsRadios1" id="optionsRadios11A" value="5"> YES
                    </label>
                    <label>
                      <input class="calc" type="radio" name="optionsRadios1" id="optionsRadios21A" value="0"> NO
                    </label>
                    <label>
                      <input class="calc" type="radio" name="optionsRadios1" id="optionsRadios31A" value="3"> PARTIAL
                    </label>
                    <label>
                      <input class="calc" type="radio" name="optionsRadios1" id="optionsRadios41A" value="0"> UNSURE
                    </label>
                  </div>
                </div>
              </div>
              <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="headingTwoA">
                  <h4 class="panel-title">
                    <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion1" href="#collapseTwoA" aria-expanded="false" aria-controls="collapseTwoA">
                      <span class="letter">b</span> Question 1B
                    </a>
                  </h4>
                </div>
                <div id="collapseTwoA" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwoA">
                  <div class="panel-body">
                    <label>
                      <input class="calc" type="radio" name="optionsRadios2" id="optionsRadios11B" value="5"> YES
                    </label>
                    <label>
                      <input class="calc" type="radio" name="optionsRadios2" id="optionsRadios21B" value="0"> NO
                    </label>
                    <label>
                      <input class="calc" type="radio" name="optionsRadios2" id="optionsRadios31B" value="3"> PARTIAL
                    </label>
                    <label>
                      <input class="calc" type="radio" name="optionsRadios2" id="optionsRadios41B" value="0"> UNSURE
                    </label>
                  </div>
                </div>
              </div>
              <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="headingThreeA">
                  <h4 class="panel-title">
                    <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion1" href="#collapseThreeA" aria-expanded="false" aria-controls="collapseThreeA">
                      <span class="letter">c</span> Question1C
                    </a>
                  </h4>
                </div>
                <div id="collapseThreeA" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThreeA">
                  <div class="panel-body">
                    <label>
                      <input class="calc" type="radio" name="optionsRadios3" id="optionsRadios11C" value="5"> YES
                    </label>
                    <label>
                      <input class="calc" type="radio" name="optionsRadios3" id="optionsRadios21C" value="0"> NO
                    </label>
                    <label>
                      <input class="calc" type="radio" name="optionsRadios3" id="optionsRadios31C" value="3"> PARTIAL
                    </label>
                    <label>
                      <input class="calc" type="radio" name="optionsRadios3" id="optionsRadios41C" value="0"> UNSURE
                    </label>
                  </div>
                </div>
              </div>
              <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="headingFourA">
                  <h4 class="panel-title">
                    <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion1" href="#collapseFourA" aria-expanded="false" aria-controls="collapseFourA">
                      <span class="letter">d</span> Question 1D
                    </a>
                  </h4>
                </div>
                <div id="collapseFourA" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFourA">
                  <div class="panel-body">
                    <label>
                      <input class="calc" type="radio" name="optionsRadios4" id="optionsRadios11D" value="5"> YES
                    </label>
                    <label>
                      <input class="calc" type="radio" name="optionsRadios4" id="optionsRadios21D" value="0"> NO
                    </label>
                    <label>
                      <input class="calc" type="radio" name="optionsRadios4" id="optionsRadios31D" value="3"> PARTIAL
                    </label>
                    <label>
                      <input class="calc" type="radio" name="optionsRadios4" id="optionsRadios41D" value="0"> UNSURE
                    </label>
                  </div>
                </div>
              </div>
              <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="headingFiveA">
                  <h4 class="panel-title">
                    <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion1" href="#collapseFiveA" aria-expanded="false" aria-controls="collapseFiveA">
                      <span class="letter">e</span> Question 1E
                    </a>
                  </h4>
                </div>
                <div id="collapseFiveA" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFiveA">
                  <div class="panel-body">
                    <label>
                      <input class="calc" type="radio" name="optionsRadios5" id="optionsRadios11E" value="5"> YES
                    </label>
                    <label>
                      <input class="calc" type="radio" name="optionsRadios5" id="optionsRadios21E" value="0"> NO
                    </label>
                    <label>
                      <input class="calc" type="radio" name="optionsRadios5" id="optionsRadios31E" value="3"> PARTIAL
                    </label>
                    <label>
                      <input class="calc" type="radio" name="optionsRadios5" id="optionsRadios41E" value="0"> UNSURE
                    </label>
                  </div>
                </div>
              </div>
            </div>
            <!-- End question group 1 -->
          </div>
        </div>
      </div>
      <!-- Collapse group 2 -->
      <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="headingTwo">
          <h4 class="panel-title">
            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
              <h4><b>2</b> Question 2</h4>
            </a>
          </h4>
        </div>
        <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
          <div class="panel-body">
            <!-- Question group 2 -->
            <div class="panel-group" id="accordion2" role="tablist" aria-multiselectable="true">
              <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="headingOneB">
                  <h4 class="panel-title">
                    <a role="button" data-toggle="collapse" data-parent="#accordion2" href="#collapseOneB" aria-expanded="true" aria-controls="collapseOneB">
                      <span class="letter">a</span> Question 2A
                    </a>
                  </h4>
                </div>
                <div id="collapseOneB" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOneB">
                  <div class="panel-body">
                    <label>
                      <input class="calc" type="radio" name="optionsRadios6" id="optionsRadios12A" value="5"> YES
                    </label>
                    <label>
                      <input class="calc" type="radio" name="optionsRadios6" id="optionsRadios22A" value="0"> NO
                    </label>
                    <label>
                      <input class="calc" type="radio" name="optionsRadios6" id="optionsRadios32A" value="3"> PARTIAL
                    </label>
                    <label>
                      <input class="calc" type="radio" name="optionsRadios6" id="optionsRadios42A" value="0"> UNSURE
                    </label>
                  </div>
                </div>
              </div>
              <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="headingTwoB">
                  <h4 class="panel-title">
                    <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwoB" aria-expanded="false" aria-controls="collapseTwoB">
                      <span class="letter">b</span> Question 2B
                    </a>
                  </h4>
                </div>
                <div id="collapseTwoB" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwoB">
                  <div class="panel-body">
                    <label>
                      <input class="calc" type="radio" name="optionsRadios7" id="optionsRadios12B" value="5"> YES
                    </label>
                    <label>
                      <input class="calc" type="radio" name="optionsRadios7" id="optionsRadios22B" value="0"> NO
                    </label>
                    <label>
                      <input class="calc" type="radio" name="optionsRadios7" id="optionsRadios32B" value="3"> PARTIAL
                    </label>
                    <label>
                      <input class="calc" type="radio" name="optionsRadios7" id="optionsRadios42B" value="0"> UNSURE
                    </label>
                  </div>
                </div>
              </div>
              <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="headingThreeB">
                  <h4 class="panel-title">
                    <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion2" href="#collapseThreeB" aria-expanded="false" aria-controls="collapseThreeB">
                      <span class="letter">c</span> Question 2C
                    </a>
                  </h4>
                </div>
                <div id="collapseThreeB" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThreeB">
                  <div class="panel-body">
                    <label>
                      <input class="calc" type="radio" name="optionsRadios8" id="optionsRadios12C" value="5"> YES
                    </label>
                    <label>
                      <input class="calc" type="radio" name="optionsRadios8" id="optionsRadios22C" value="0"> NO
                    </label>
                    <label>
                      <input class="calc" type="radio" name="optionsRadios8" id="optionsRadios32C" value="3"> PARTIAL
                    </label>
                    <label>
                      <input class="calc" type="radio" name="optionsRadios8" id="optionsRadios42C" value="0"> UNSURE
                    </label>
                  </div>
                </div>
              </div>
              <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="headingFourB">
                  <h4 class="panel-title">
                    <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion2" href="#collapseFourB" aria-expanded="false" aria-controls="collapseFourB">
                      <span class="letter">d</span> Question 2D
                    </a>
                  </h4>
                </div>
                <div id="collapseFourB" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFourB">
                  <div class="panel-body">
                    <label>
                      <input class="calc" type="radio" name="optionsRadios9" id="optionsRadios12D" value="0"> YES
                    </label>
                    <label>
                      <input class="calc" type="radio" name="optionsRadios9" id="optionsRadios22D" value="5"> NO
                    </label>
                    <label>
                      <input class="calc" type="radio" name="optionsRadios9" id="optionsRadios32D" value="3"> PARTIAL
                    </label>
                    <label>
                      <input class="calc" type="radio" name="optionsRadios9" id="optionsRadios42D" value="0"> UNSURE
                    </label>
                  </div>
                </div>
              </div>
              <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="headingFiveB">
                  <h4 class="panel-title">
                    <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion2" href="#collapseFiveB" aria-expanded="false" aria-controls="collapseFiveB">
                      <span class="letter">e</span> Question 2E
                    </a>
                  </h4>
                </div>
                <div id="collapseFiveB" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFiveB">
                  <div class="panel-body">
                    <label>
                      <input class="calc" type="radio" name="optionsRadios10" id="optionsRadios12E" value="0"> YES
                    </label>
                    <label>
                      <input class="calc" type="radio" name="optionsRadios10" id="optionsRadios22E" value="5"> NO
                    </label>
                    <label>
                      <input class="calc" type="radio" name="optionsRadios10" id="optionsRadios32E" value="3"> PARTIAL
                    </label>
                    <label>
                      <input class="calc" type="radio" name="optionsRadios10" id="optionsRadios42E" value="0"> UNSURE
                    </label>
                  </div>
                </div>
              </div>
            </div>
            <!-- End question group 2 -->
          </div>
        </div>
      </div>
      <!-- Collapse group 3 -->
      <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="headingThree">
          <h4 class="panel-title">
            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
              <h4><b>3</b> Question 3</h4>
            </a>
          </h4>
        </div>
        <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
          <div class="panel-body">
            <!-- Question group 3 -->
            <div class="panel-group" id="accordion3" role="tablist" aria-multiselectable="true">
              <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="headingOneC">
                  <h4 class="panel-title">
                    <a role="button" data-toggle="collapse" data-parent="#accordion3" href="#collapseOneC" aria-expanded="true" aria-controls="collapseOneC">
                      <span class="letter">a</span> Question 3A
                    </a>
                  </h4>
                </div>
                <div id="collapseOneC" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOneC">
                  <div class="panel-body">
                    <label>
                      <input class="calc" type="radio" name="optionsRadios11" id="optionsRadios13A" value="5"> YES
                    </label>
                    <label>
                      <input class="calc" type="radio" name="optionsRadios11" id="optionsRadios23A" value="0"> NO
                    </label>
                    <label>
                      <input class="calc" type="radio" name="optionsRadios11" id="optionsRadios33A" value="3"> PARTIAL
                    </label>
                    <label>
                      <input class="calc" type="radio" name="optionsRadios11" id="optionsRadios43A" value="0"> UNSURE
                    </label>
                  </div>
                </div>
              </div>
              <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="headingTwoC">
                  <h4 class="panel-title">
                    <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion3" href="#collapseTwoC" aria-expanded="false" aria-controls="collapseTwoC">
                      <span class="letter">b</span> Question 3B
                    </a>
                  </h4>
                </div>
                <div id="collapseTwoC" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwoC">
                  <div class="panel-body">
                    <label>
                      <input class="calc" type="radio" name="optionsRadios12" id="optionsRadios13B" value="5"> YES
                    </label>
                    <label>
                      <input class="calc" type="radio" name="optionsRadios12" id="optionsRadios23B" value="0"> NO
                    </label>
                    <label>
                      <input class="calc" type="radio" name="optionsRadios12" id="optionsRadios33B" value="3"> PARTIAL
                    </label>
                    <label>
                      <input class="calc" type="radio" name="optionsRadios12" id="optionsRadios43B" value="0"> UNSURE
                    </label>
                  </div>
                </div>
              </div>
              <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="headingThreeC">
                  <h4 class="panel-title">
                    <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion3" href="#collapseThreeC" aria-expanded="false" aria-controls="collapseThreeC">
                      <span class="letter">c</span> Question 3C
                    </a>
                  </h4>
                </div>
                <div id="collapseThreeC" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThreeC">
                  <div class="panel-body">
                    <label>
                      <input class="calc" type="radio" name="optionsRadios13" id="optionsRadios13C" value="5"> YES
                    </label>
                    <label>
                      <input class="calc" type="radio" name="optionsRadios13" id="optionsRadios23C" value="0"> NO
                    </label>
                    <label>
                      <input class="calc" type="radio" name="optionsRadios13" id="optionsRadios33C" value="3"> PARTIAL
                    </label>
                    <label>
                      <input class="calc" type="radio" name="optionsRadios13" id="optionsRadios43C" value="0"> UNSURE
                    </label>
                  </div>
                </div>
              </div>
              <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="headingFourC">
                  <h4 class="panel-title">
                    <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion3" href="#collapseFourC" aria-expanded="false" aria-controls="collapseFourC">
                      <span class="letter">d</span> Question 3D
                    </a>
                  </h4>
                </div>
                <div id="collapseFourC" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFourC">
                  <div class="panel-body">
                    <label>
                      <input class="calc" type="radio" name="optionsRadios14" id="optionsRadios13D" value="0"> YES
                    </label>
                    <label>
                      <input class="calc" type="radio" name="optionsRadios14" id="optionsRadios23D" value="5"> NO
                    </label>
                    <label>
                      <input class="calc" type="radio" name="optionsRadios14" id="optionsRadios33D" value="3"> PARTIAL
                    </label>
                    <label>
                      <input class="calc" type="radio" name="optionsRadios14" id="optionsRadios43D" value="0"> UNSURE
                    </label>
                  </div>
                </div>
              </div>
              <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="headingFiveC">
                  <h4 class="panel-title">
                    <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion3" href="#collapseFiveC" aria-expanded="false" aria-controls="collapseFiveC">
                      <span class="letter">e</span> Question 3E
                    </a>
                  </h4>
                </div>
                <div id="collapseFiveC" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFiveC">
                  <div class="panel-body">
                    <label>
                      <input class="calc" type="radio" name="optionsRadios15" id="optionsRadios13E" value="0"> YES
                    </label>
                    <label>
                      <input class="calc" type="radio" name="optionsRadios15" id="optionsRadios23E" value="5"> NO
                    </label>
                    <label>
                      <input class="calc" type="radio" name="optionsRadios15" id="optionsRadios33E" value="3"> PARTIAL
                    </label>
                    <label>
                      <input class="calc" type="radio" name="optionsRadios15" id="optionsRadios43E" value="0"> UNSURE
                    </label>
                  </div>
                </div>
              </div>
            </div>
            <!-- End question group 3 -->
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</div>
</div>
</div>
<div class="row">
  <div class="col-xs-12">
    <input type="text" name="sum">
    <!-- <h4 class="status"> <b>Readiness Status: Reay to Buy</b> </h4>
<p class="statusMsg">Wow - thanks to all your hard work, you are ready to become a homeowner very soon! We'll help you with all the final details to complete the process.</p> -->
  </div>
</div>

P.S。删除了问题4,因为答案长度有限制。