Show/Hide div 如果检查所有收音机

Question

我有N组收音机。如果检查了所有无线电组，我想显示一个 div，如果没有检查所有，则显示另一个 div:

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

你可以得到选中的单选按钮数量，如果它是三个，那么所有的类别都被选中

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 2

这可以通过 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();
      }
 })
});

for length refer Here

Here is a fiddle to the example

Answer 3

这是一个 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 4

作为一个组只会选择一个radio，所以这里只会勾选3个radio。

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);
};

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

Show/Hide div 如果检查所有收音机

Show/Hide div if all radios are checked

html

javascript

validation

jquery

radio-button

Here is a fiddle to the example