如果选中所有无线电，则显示/隐藏div

Question

我有N组无线电。我想显示一个div，如果检查了所有无线电组，如果不是全部都被检查，则显示另一个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>

Answer 2

如果是3，则可以获得已选中的单选按钮计数，然后选择所有类别

Live Demo

$('.yeschecked').hide();
$('input[type=radio]').change(function () {
    if ($('input[type=radio]:checked').length == 3) {
        $('.yeschecked').show();
        $('.notchecked').hide();
    } else {
        $('.notchecked').show();
        $('.yeschecked').hide();
    }
});

Answer 3

这可以通过length

来完成

$(document).ready(function(){
    var  total =  totalChecked  = 0;
 $('input[type=radio]').on("change",function(){
        totalChecked =   $('input[type=radio]:checked').length;
       if( totalChecked  == 3  ){
           $('.yeschecked').show();
          $('. notchecked').hide();
      } else {
        $('. notchecked').show();
        $('.yeschecked').hide();
      }
 })
});

  

的长度请参阅 Here

Here is a fiddle to the example

Answer 4

作为一个组，只会选择一个无线电，因此这里只会检查3个无线电。

＆＃13;

＆＃13;

var totl; // track total radio groups
$(function() {
  var rdos = $('input[type=radio]');
  rdos.on('change', toggleDivs);
  var tmp = [], nm;
  rdos.each(function() {
    nm = this.name.toLowerCase();
    if (-1 === $.inArray(nm, tmp)) //not found in array
      tmp.push(nm); // new group
  });
  totl = tmp.length; // get count of radio groups
  toggleDivs(); //page load trigger
});

var toggleDivs = function() {
  var chkd = $('input[type=radio]:checked').length;
  $('div.notchecked').toggle(chkd !== totl);
  $('div.yeschecked').toggle(chkd === totl);
};

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;