如果选中所有收音机，则显示/隐藏 div答案

【问题标题】：Show/Hide div if all radios are checked如果选中所有收音机，则显示/隐藏 div
【发布时间】：2015-10-15 00:40:35
【问题描述】：

我有 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();
});

【问题讨论】：

checkbox，我在代码中没有看到任何复选框
我的错误。做了收音机，但写了复选框。固定。
您真的要检查所有单选按钮吗？
^ 每组一张支票，是的。

标签： javascript jquery html validation radio-button

【解决方案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>

【讨论】：

【解决方案2】：

如果选中的单选按钮计数为三个，则您可以获得选中的单选按钮计数，然后选择所有类别

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

【讨论】：

他说他有n个复选框，这个只选中了3个复选框
他有单选按钮，我看不到复选框，单选按钮有排他选择

【解决方案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

【讨论】：

在您的示例中，总数为 9，totalChecked 最多为 3。不可能 3==9。

【解决方案4】：

作为一个组，只会选择一个收音机，所以这里只检查 3 台收音机。

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>

【讨论】：