How to check if all radio buttons (that are rendered) are selected in 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>

Please don't link to 3rd party sites as those links can become dead over time. Just insert a "code snippet" into your question. — Scott Marcus, Sep 23 '17 at 18:42

Scott Marcus · Answer 1 · 2017-09-23T23:56:42.860

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>

Thanks Can you clarify on this: if(visibleDIVs.length === $("input:radio:checked",visibleDIVs).length) I am not quite understanding the second part after the === sign. How are you getting the length of 2 different elements? — Jay Jay, Sep 23 '17 at 23:42
@LarryLiu Ok, check out the comments in the code for a better explanation. — Scott Marcus, Sep 23 '17 at 23:48
Perfect understanding. Thank you Scott. May I ask, can you refer me to any resources where I can read up on how to be more precise in the jQuery selectors. For example here: var visibleDIVs = $("div.division:not(.hide)"); I would like to specify which parent class/id the division is in as I have multiple forms. — Jay Jay, Sep 23 '17 at 23:51
@LarryLiu The JQuery function accepts **any** valid CSS selector and `div.division:not(.hide)` is just that, it's not JQuery. It's a CSS selector that says: *"Find all `div` elements that have the `division` class, but not any that use the `hide` class."* There are many CSS selectors and an almost infinite amount of ways to combine them. [Here a good place to start.](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors). — Scott Marcus, Sep 23 '17 at 23:53
@LarryLiu All you would need to further specify which class or `id` the `div` is in is to qualify that at the beginning of the selector. For example: `#special div.division:not(.hide)` gets the `div.division` element that is anywhere inside of the element who's `id` is `special`. `.special div.division:not(.hide)` gets the `div.division` element that is anywhere inside of the element who's `class` is `special`. — Scott Marcus, Sep 24 '17 at 00:03
Thanks for clarifying. I thought as much but it just doesn't seem to work with Shree33's solution. His solutions fits me best because it doesn't change much of my code. This example I posted in the original question is quite different to the problem that I am trying to solve. You mentioned I shouldn't post 3rd party links, is there another way to show you an edited fiddle? — Jay Jay, Sep 24 '17 at 00:12
@LarryLiu You also need to add .division on the other selector as well. — Scott Marcus, Sep 24 '17 at 00:41

score 2 · Accepted Answer · answered Sep 23 '17 at 18:44

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>

How do I make the jQuery selector more precise? I want to be able to select the form ID and certain div's For example: $(" form .division input:radio:visible").each(function() This isn't working. — Jay Jay, Sep 23 '17 at 23:40

Baro · Answer 3 · 2017-09-23T19:28:01.167

0

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/

edited Sep 23 '17 at 19:28

answered Sep 23 '17 at 18:40

Baro

5,300
2
17
39

Please don't link to 3rd party sites as those links can become dead over time. Just insert a "code snippet" into your question. – Scott Marcus Sep 23 '17 at 18:49
@ScottMarcus Sorry Scott, I disagree. It's true that the link could die, but if I write only the code necessary to answer is much more readable. With your edit, you can no longer see what my edit is. Also I do not like StackOverflow system ! I prefer JSFiddle. – Baro Sep 23 '17 at 19:29
1

Sorry that you don't like the SO system, but placing your working code somewhere else, at the least, makes it harder to consume your answer in total and, at the most, makes it unreadable (if the link dies). There's absolutely no reason you can't just post your correction first and then include the full working code, right in the answer. – Scott Marcus Sep 23 '17 at 19:36
Sometimes links get blocked, too, making it impossible to follow them. – Modus Tollens Sep 23 '17 at 19:42

score 0 · Answer 4 · answered Sep 23 '17 at 18:43

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?

score -1 · Answer 5 · answered Sep 23 '17 at 18:53

-1

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

answered Sep 23 '17 at 18:53

Md. Saifur Rahman

67
7

This is not an answer. It should be a comment. – Scott Marcus Sep 23 '17 at 20:06

How to check if all radio buttons (that are rendered) are selected in Jquery/Javascript

5 Answers5