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

Question

I am able to check for all radio buttons that are selected. However ,I only want to check for those that are rendered (the ones that don't have "display:none").

So if only the 1 and 3 division is selected, it should display true. Currently, it will only display true if all 3 is selected.

EDIT : I have taken Shree33 answer and made it work with 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

Just use a selector that excludes the non-displayed ones and compare the amount of found elements to the amount of checked radio buttons in that same set (using JQuery context ). If the amounts are the same, all visible buttons have been selected.

Also, you really shouldn't use a link when you aren't actually navigating anywhere. If you just need to trigger some code (as is the case here), just about any element can have a click event handler bound to it. By not using an a , you don't have to cancel the native behavior of the link ( evt.preventDefault() ) and those that rely on assistive technologies, like screen readers won't have problems that occur when the screen reader encounters a link that doesn't actually navigate.

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

You were close, just change the $("input:radio") selector to $("input:radio:visible") . That should work.

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

You can check for the parent visible state too:

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

Where you're getting the length,

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

try

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

Is that what you are looking for? Also do you need to get the name and concat it, as won't $(this) get you your object as well?

Answer 5

Pls have a look at this . Seems to solve your "if visible" issue with window.getComputedStyle.