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

Posted 2023-03-05

【中文标题】如果选中所有收音机，则显示/隐藏 div

【英文标题】：Show/Hide div if all radios are checked

【发布时间】：2015-10-15 00:40:35

【问题描述】：

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

【问题讨论】：

checkbox，我在代码中没有看到任何复选框

我的错误。做了收音机，但写了复选框。固定。

您真的要检查所有单选按钮吗？

^ 每组一张支票，是的。

【参考方案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>