简单的测验问题

Question

我正在尝试构建一个基本的单题测验。根据选中的复选框，3 个结果中的 1 个应该显示 divs。

如果合并还没有被选中那么它应该显示较低的结果div
如果一切都已检查然后显示高结果div
如果已勾选整合但其他项目未勾选则显示中等结果div

我还需要使用提交时未选中的框的名称填充中间结果 div，但我不知道如何去做。现在我主要在提交上工作，但我只能显示中低结果，而不是高结果 div。我认为这是语句优先级的问题。

var a = document.querySelector('#consolidation');
    var btn = document.querySelector('#btn')
    btn.onclick = () => {
      if (a.checked == false) {
        $('#low').show();
      } else if ($('#list :checkbox:not(checked)').length == 0) {
        $('#high').show();
    
      } else if (a.checked == true) {
        $('#medium').show();
    
      } else {
        alert('select an option');
      }
    };

.results {
        display: none;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="list" style="max-width: 650px; margin: 40px auto;">
        <!-- Consolidatation-->
        <fieldset>
          <input id="consolidation" type="checkbox" name="">
          <label>Searched and combined lost funds</label>
        </fieldset>
        <!-- Advice -->
        <fieldset>
          <input id="advice" type="checkbox" name="">
          <label>Talked with an advisor</label>
        </fieldset>
        <!-- identity -->
        <fieldset>
          <input id="identity" type="checkbox" name="">
          <label>Completed an ID check</label>
        </fieldset>
        <!-- balance -->
        <fieldset>
          <input id="balance" type="checkbox" name="">
          <label>Checked your balance</label>
        </fieldset>
        <!-- app -->
        <fieldset>
          <input id="app" type="checkbox" name="">
          <label>Downloaded the Sunsuper app</label>
        </fieldset>
        <!-- calculator -->
        <fieldset>
          <input id="calculator" type="checkbox" name="">
          <label>Used our retirement calculator</label>
        </fieldset>
    
        <!-- SUBMIT BUTTON -->
        <input type="button" id="btn" value="Submit">
    
        <!-- Result options -->
        <div id="low" class="results">low results</div>
        <div id="medium" class="results">medium results</div>
        <div id="high" class="results">high results</div>
      </div>

Answer 1

您在 checked 之前错过了 : ($('#list :checkbox:not(:checked)').length == 0):

var a = document.querySelector('#consolidation');
    var btn = document.querySelector('#btn')
    btn.onclick = () => {
      if (a.checked == false) {
        $('#low').show();
        $('#high').hide();
        $('#medium').hide();
      } else if ($('#list :checkbox:not(:checked)').length == 0) {
        $('#high').show();
        $('#medium').hide();
        $('#low').hide();

    
      } else if (a.checked == true) {
    mytext='<br> You have an average results, try doing :<br>';
        var unchecked = $('#list :checkbox:not(:checked)');
        for (i = 0; i < unchecked.length-1; i++) 
        mytext +=unchecked[i].nextSibling.nextSibling.innerText+', ';
        mytext+=unchecked[unchecked.length-1].nextSibling.nextSibling.innerText;
        mytext+=' to improve.';
        $('#medium').append(mytext);
        $('#medium').show(); 
    
      } else {
        alert('select an option');
      }
    };

.results {
        display: none;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="list" style="max-width: 650px; margin: 40px auto;">
        <!-- Consolidatation-->
        <fieldset>
          <input id="consolidation" type="checkbox" name="">
          <label>Searched and combined lost funds</label>
        </fieldset>
        <!-- Advice -->
        <fieldset>
          <input id="advice" type="checkbox" name="">
          <label>Talked with an advisor</label>
        </fieldset>
        <!-- identity -->
        <fieldset>
          <input id="identity" type="checkbox" name="">
          <label>Completed an ID check</label>
        </fieldset>
        <!-- balance -->
        <fieldset>
          <input id="balance" type="checkbox" name="">
          <label>Checked your balance</label>
        </fieldset>
        <!-- app -->
        <fieldset>
          <input id="app" type="checkbox" name="">
          <label>Downloaded the Sunsuper app</label>
        </fieldset>
        <!-- calculator -->
        <fieldset>
          <input id="calculator" type="checkbox" name="">
          <label>Used our retirement calculator</label>
        </fieldset>
    
        <!-- SUBMIT BUTTON -->
        <input type="button" id="btn" value="Submit">
    
        <!-- Result options -->
        <div id="low" class="results">low results</div>
        <div id="medium" class="results">medium results</div>
        <div id="high" class="results">high results</div>
      </div>

简单的测验问题

Simple quiz issue

javascript

checkbox

jquery

if-statement