如何检查是否在Jquery / Javascript中选择了所有已渲染的单选按钮

Question

我能够检查所有选中的单选按钮。 但是，我只想检查那些已渲染的对象（那些没有“ display：none”的对象）。

因此，如果仅选择1和3除法，则应显示true。 当前，只有选择全部3个，它才会显示true。

编辑 ：我已经采取Shree33的答案，并使其与input:radio:visible 。

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

 .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> <div>4 <input type="radio" name="radio4" value="false" /> <input type="radio" name="radio4" value="true" /> </div> </form> <a href="#">click</a> 

Answer 1

只需使用一个选择器（不包括未显示的选择器），然后将找到的元素数量与同一集合中选中的单选按钮的数量进行比较（使用JQuery context ）。 如果数量相同，则已选择所有可见按钮。

另外，当您实际上没有在任何地方导航时，实际上不应该使用链接。 如果只需要触发一些代码（如此处所示），则几乎任何元素都可以绑定有click事件处理程序。 通过不使用a ，您不必取消链接的本机行为（ evt.preventDefault() ），而那些依赖于辅助技术的链接，例如屏幕阅读器，则不会遇到当屏幕阅读器遇到a时出现的问题。实际无法导航的链接。

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

 /* Make the clickable div look like a link */ #click { text-decoration:underline; cursor:pointer; } .hide { 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 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> 

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") {

那是您要找的东西吗？ 另外，您还需要获取名称并连接它吗，因为$（this）不会也使您获得对象吗？

Answer 5

请看看这个 。 似乎可以解决window.getComputedStyle的“如果可见”问题。