Question

我查看了几个StackOverflow页面，没有任何帮助。我使用HTML单选按钮进行了测验。问题和答案不是动态生成的。每个问题都有可能的答案，正确答案的值为“正确”。我想检查用户在提交时选择的所有无线电，如果它们的值是==向右，那么我想添加一个点（r + = 1）。

我的HTML看起来像这样（x9）。

      <div class='col-sm-12 col-md-6 col-lg-4 text-center'>
        <p class='question'>Which version of IE supports SSE?</p>
        <div class='form-check'>
          <input class='form-check-input' type='radio' name='htmlq9a'>
          <label class='form-check-label' for='htmlq9a'>Internet explorer 10+</label>
        </div>
        <div class='form-check'>
          <input class='form-check-input' type='radio' name='htmlq9a'>
          <label class='form-check-label' for='htmlq9a'>Internet explorer 9+</label>
        </div>
        <div class='form-check'>
          <input class='form-check-input' type='radio' name='htmlq9a'>
          <label class='form-check-label' for='htmlq9a'>Internet explorer 8+</label>
        </div>
        <div class='form-check'>
          <input class='form-check-input' type='radio' name='htmlq9a' value='right'>
          <label class='form-check-label' for='htmlq9a'>Internet explorer does not support SSE.</label>
        </div>
      </div>

我的javascript看起来像这样。

        var r   = 0;
        var tr  = 9;
        var m   = 100;
        var fs;


        $('#sub').click(function(e){
          e.preventDefault();
          $('input:checked').each(
            if( $(this).val() == 'right' ){
              r+=1;
            }
          }
        });
        var fs = (r/tr) * m;
        $('#as').html(fs);

Answer 1

为什么不检查，如果选中了正确的？

if ($("input[value=right]").prop("checked")) {
   // add points
}

Answer 2

问题在于，当您点击#sub时，您确实获得了正确的值，但您从未运行过$('#as').html(fs);，因此它不会更新。

在点击事件中移动变量：

$('#sub').click(function(e) {
  var r = 0;
  var tr = 2;
  var m = 100;
  var fs;
  e.preventDefault();
  $('input:checked').each(function() {
    if ($(this).val() == 'right') {
      r += 1;
    }
  })
  var fs = (r / tr) * m;
  $('#as').html(fs);
});

<强>演示

＆＃13;

$('#sub').click(function(e) {
  var r = 0;
  var tr = 2;
  var m = 100;
  var fs;
  e.preventDefault();
  $('input:checked').each(function() {
    if ($(this).val() == 'right') {
      r += 1;
    }
  })
  var fs = (r / tr) * m;
  $('#as').html(fs);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='col-sm-12 col-md-6 col-lg-4 text-center'>
  <p class='question'>Which version of IE supports SSE?</p>
  <div class='form-check'>
    <input class='form-check-input' type='radio' name='htmlq9a1'>
    <label class='form-check-label' for='htmlq9a'>Internet explorer 10+</label>
  </div>
  <div class='form-check'>
    <input class='form-check-input' type='radio' name='htmlq9a1'>
    <label class='form-check-label' for='htmlq9a'>Internet explorer 9+</label>
  </div>
  <div class='form-check'>
    <input class='form-check-input' type='radio' name='htmlq9a1'>
    <label class='form-check-label' for='htmlq9a'>Internet explorer 8+</label>
  </div>
  <div class='form-check'>
    <input class='form-check-input' type='radio' name='htmlq9a1' value='right'>
    <label class='form-check-label' for='htmlq9a'>Internet explorer does not support SSE.</label>
  </div>
</div>
<div class='col-sm-12 col-md-6 col-lg-4 text-center'>
  <p class='question'>Which version of IE supports SSE?</p>
  <div class='form-check'>
    <input class='form-check-input' type='radio' name='htmlq9a2'>
    <label class='form-check-label' for='htmlq9a'>Internet explorer 10+</label>
  </div>
  <div class='form-check'>
    <input class='form-check-input' type='radio' name='htmlq9a2'>
    <label class='form-check-label' for='htmlq9a'>Internet explorer 9+</label>
  </div>
  <div class='form-check'>
    <input class='form-check-input' type='radio' name='htmlq9a2'>
    <label class='form-check-label' for='htmlq9a'>Internet explorer 8+</label>
  </div>
  <div class='form-check'>
    <input class='form-check-input' type='radio' name='htmlq9a2' value='right'>
    <label class='form-check-label' for='htmlq9a'>Internet explorer does not support SSE.</label>
  </div>
</div>

<button id="sub">sub</button>
<div id="as"></div>

＆＃13;

Answer 3

有一些问题需要解决：

您在点击发生前更新了结果div。将更新结果div的代码移动到单击处理程序
在单击处理程序中移动变量，因此范围有限，如果再次运行代码，它们将被视为新变量（否则陈旧值仍将在全局范围内）。

＆＃13;

$('#sub').click(function(e) {
  var r = 0;
  var tr = 9;
  var m = 100;
  var fs;
  e.preventDefault();
  $('input:checked').each(function() {
    if ($(this).val() == 'right') {
      r += 1;
    }
  })

  var fs = (r / tr) * m;
  $('#as').html(fs);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='col-sm-12 col-md-6 col-lg-4 text-center'>
  <p class='question'>Which version of IE supports SSE?</p>
  <div class='form-check'>
    <input class='form-check-input' type='radio' name='htmlq9a'>
    <label class='form-check-label' for='htmlq9a'>Internet explorer 10+</label>
  </div>
  <div class='form-check'>
    <input class='form-check-input' type='radio' name='htmlq9a'>
    <label class='form-check-label' for='htmlq9a'>Internet explorer 9+</label>
  </div>
  <div class='form-check'>
    <input class='form-check-input' type='radio' name='htmlq9a'>
    <label class='form-check-label' for='htmlq9a'>Internet explorer 8+</label>
  </div>
  <div class='form-check'>
    <input class='form-check-input' type='radio' name='htmlq9a' value='right'>
    <label class='form-check-label' for='htmlq9a'>Internet explorer does not support SSE.</label>
  </div>
</div>
<button id="sub">Submit</button>
<div id="as"></div>

＆＃13;

Answer 4

将单击事件替换为单选按钮的以下更改事件。

$('input:radio').change(function() {
    if($(this).val() == 'right') {
        r+=1;
    }
});

HTML5和jQuery测验逻辑

4 个答案: