Question

我可以检查所有选中的单选按钮。但是，我只想检查那些渲染的内容（那些没有＆＃34;显示：无＆＃34;）。

因此，如果仅选择1和3分区，则应显示为true。目前，只有选中全部3才会显示true。

修改：我已经接受了Shree33的回答并使其与input:radio:visible一起使用。

＆＃13;

$(document).ready(function() {
  $("a").click(function(e) {
    e.preventDefault();
    var all_answered = true;
    $(".division input:radio:visible").each(function() {
      var name = $(this).attr("name");
      if ($("input:radio[name=" + name + "]:checked").length == 0) {
        all_answered = false;
      }
    });
    alert(all_answered);
  })
});

＆＃13;

.test{
  //display:none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <div class="division">1
   <input type="radio" name="radio1" value="false" />
  <input type="radio" name="radio1" value="true" />
  </div>
 
<div class="division test">2
   <input type="radio" name="radio2" value="false" />
  <input type="radio" name="radio2" value="true" />
  </div>
  
  <div class="division">3
   <input type="radio" name="radio3" value="false" />
  <input type="radio" name="radio3" value="true" />
  </div>
  <div>4
   <input type="radio" name="radio4" value="false" />
  <input type="radio" name="radio4" value="true" />
  </div>

</form>
<a href="#">click</a>

＆＃13;

Answer 1

只需使用排除未显示元素的选择器，然后将找到的元素数量与同一组中已检查单选按钮的数量进行比较（使用 JQuery context ）。如果金额相同，则选择了所有可见按钮。

此外，当您实际上并未在任何地方导航时，您真的不应该使用链接。如果你只需要触发一些代码（就像这里的情况那样），几乎任何元素都可以绑定一个click事件处理程序。如果不使用a，您就不必取消链接的本机行为（evt.preventDefault()）和那些依赖辅助技术的行为，例如屏幕阅读器无法解决问题屏幕阅读器遇到实际无法导航的链接时发生的情况。

＆＃13;

$(function() {
  $("#click").click(function(e) {
  
    // Get only the visible DIVs that have the "division" class
    var visibleDIVs = $("div.division:not(.hide)");
    
    // Now that we have a collection that contains only the div elements 
    // that are visible, we can get the count of them easily with: visibleDIVs.length
    
    // We can also search the document for any checked radio buttons, but only those 
    // that are part of the visible divs collection like this: $("input:radio:checked", visibleDIVs).
    // (the second argument (, visibleDIVs) constrains the search for radio buttons to just
    // the collection of visilbe divs we've already gotten) and once we have those, 
    // we can also get the count of them by checking the .length of that collection.
    
    // If the count of visible divs (visibleDIVs.length) equals the count of the visible 
    // checked radio buttons, then all buttons have been checked: 
    if(visibleDIVs.length === $("input:radio:checked", visibleDIVs).length){
      alert("All Answered");
    }
  
  })
});

＆＃13;

/* Make the clickable div look like a link */
#click {
  text-decoration:underline;
  cursor:pointer;
}

.hide { display:none; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
              <div class="division">1
                <input type="radio" name="radio1" value="false">
                <input type="radio" name="radio1" value="true">
             </div>

              <div class="division hide">2
                <input type="radio" name="radio2" value="false">
                <input type="radio" name="radio2" value="true">
              </div>

              <div class="division">3
                <input type="radio" name="radio3" value="false">
                <input type="radio" name="radio3" value="true">
              </div>

        </form>
      <div id="click">click</div>

＆＃13;

Answer 2

您离我很近，只需将$("input:radio")选择器更改为$("input:radio:visible")即可。这应该工作。

$(document).ready(function() {
  $("a").click(function(e) {
    e.preventDefault();
    var all_answered = true;
    $("input:radio:visible").each(function() {
      var name = $(this).attr("name");
      if ($("input:radio[name=" + name + "]:checked").length == 0) {
        all_answered = false;
      }
    });
    alert(all_answered);
  })
});

.test{
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <div class="division">1
   <input type="radio" name="radio1" value="false" />
  <input type="radio" name="radio1" value="true" />
  </div>
 
<div class="division test">2
   <input type="radio" name="radio2" value="false" />
  <input type="radio" name="radio2" value="true" />
  </div>
  
  <div class="division">3
   <input type="radio" name="radio3" value="false" />
  <input type="radio" name="radio3" value="true" />
  </div>

</form>
<a href="#">click</a>

Answer 3

您也可以检查父级可见状态：

if (($("input:radio[name=" + name + "]:first").parent().is(':visible')) &&
        ($("input:radio[name=" + name + "]:checked").length == 0)) {
    all_answered = false;
}

https://jsfiddle.net/StepBaro/bLp8wbnh/3/

Answer 4

你获得长度的地方，

if ($("input:radio[name=" + name + "]:checked").length == 0) {

试

if ($("input:radio[name=" + name + "]:checked").length == 0 && $(this).is(":visible") {

这是你在找什么？你也需要得到这个名字并将其连接起来，因为赢了这个（这个）你也可以得到你的对象吗？

Answer 5

请看this。似乎用window.getComputedStyle来解决你的“if visible”问题。

如何检查是否在Jquery / Javascript中选择了所有单选按钮（已呈现）

5 个答案: