javascript - 如果检查了所有 radio ，则显示/隐藏 div

Question

我有 N 组 radio 。如果检查了所有 radio 组，我想显示一个 div，如果没有检查所有 radio 组，则显示另一个 div:

http://jsfiddle.net/zoLwdqx6/

HTML

<p>
    <input type="radio" name="period" value="1" />1 Year
    <input type="radio" name="period" value="2" />2 Years
    <input type="radio" name="period" value="3" />3 Years
</p>
<br>
<p>
    <input type="radio" name="year" value="1" />2015
    <input type="radio" name="year" value="2" />2014
    <input type="radio" name="year" value="3" />2013
</p>
<br>
<p>
    <input type="radio" name="student" value="1" />Paul
    <input type="radio" name="student" value="2" />Mary
    <input type="radio" name="student" value="3" />Jane
</p>
<br>
<div class="notchecked">[not all checkboxes are selected yet]</div>
<div class="yeschecked">[submit button]</div>

Javascript

$('.yeschecked').hide();
$('input[type=radio]').click(function () {
    $('.yeschecked').show();
});

Answer 1

以下是 3 未硬编码的示例:

$(function() {
  $(".yeschecked").hide();
  // count number of radio buttons grouped by name
  var radioGroups = [];
  $("input[type=radio]").each(function() {
    if ($.inArray(this.name, radioGroups) >= 0) {
      return;
    }
    radioGroups.push(this.name);
  });
  // radioGroups = ["period", "year", "student"]
  $("input[type=radio]").on("change", function() {
    var all = $("input[type=radio]:checked").length === radioGroups.length;
    // using http://api.jquery.com/toggle/#toggle-display
    $(".yeschecked").toggle(all);
    $(".notchecked").toggle(all === false);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<p>
  <input type="radio" name="period" value="1">1 Year
  <input type="radio" name="period" value="2">2 Years
  <input type="radio" name="period" value="3">3 Years
</p>
<p>
  <input type="radio" name="year" value="1">2015
  <input type="radio" name="year" value="2">2014
  <input type="radio" name="year" value="3">2013
</p>
<p>
  <input type="radio" name="student" value="1">Paul
  <input type="radio" name="student" value="2">Mary
  <input type="radio" name="student" value="3">Jane
</p>
<div class="notchecked">[not all checkboxes are selected yet]</div>
<div class="yeschecked">[submit button]</div>