简单的测验问题

Question

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

1. 如果合并尚未被选中，那么它应该显示低结果 div
2. 如果所有内容都已检查，则显示高结果 div
3. 如果已勾选合并但未勾选其他项目，则显示中等结果 div

我还需要使用提交时未选中但我不知道该怎么做的框的名称填充媒体结果 div。现在我主要是在提交上工作，但我只能得到中等和低的结果来显示，而不是高结果的 div。我认为这是陈述优先级的问题。

https://jsfiddle.net/lucym/azLf2s0t/3/

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>