Check if one of the radio buttons within a div is checked

Question

I found here this script that does almost what I need (find out if one radio button within a div is checked), although, it alerts me for each radio button, I just need one alert if one of them is checked.

Background info: If one is checked I will show the next div. If not the div won't show. On top in my system, a click on a checked radio button will uncheck it, then the showed div will be hidden.

My code:

<div class="divtop">
    <input type="radio" name="r1" value="v1" />
    <input type="radio" name="r1" value="v2" />
    <input type="radio" name="r1" value="v3" />
<div>

Here is the script:

$('.divtop input:radio').live('click', function(event) { 
  var div = $("div.divtop");
  var radiobuttons = div.find("input[type='radio']");
for (var i = 0; i < radiobuttons.length; i++) {
  if (radiobuttons[i].type === 'radio' && radiobuttons[i].checked) {
     alert ('on') // action
     } else { 
     alert ('off') // action
}} });

How can I adapt this script to get only one alert when one of the radio button is checked?

The function must be generic (no use of radio button names) because it will apply in different situations with different groups of radio buttons.

This is an odd thing to check. You're binding a function to the click event of a radio button. You can only ever have one radio button in a group selected when you click it, so what's the point? In other words, when isn't a click on a radio button going to mean one is selected? — j08691
– j08691, Commented Sep 24, 2016 at 15:41
@j08691 - well, they could all be unchecked to begin with, but it still makes no sense, as at least one will be checked the first you click it, and after that you can't uncheck all of them anyway so it's always going to be true ? — adeneo
– adeneo, Commented Sep 24, 2016 at 15:42
@adeneo - unless we use the old reset button. Anyone still using that? — j08691
– j08691, Commented Sep 24, 2016 at 15:43
Explanations following comments: The point is if one is checked I will show the next div. If not the div won't show. On top, in my system, a click on a checked radio button will uncheck it, then the showed div will be hidden. — Sergelie
– Sergelie, Commented Sep 24, 2016 at 15:49
add "break;" after your alert('on') and remove the else. now place your something.show() just between the alert and the break; your something.show() could be replace with hideAllDivs() and then something.show() — Stavm
– Stavm, Commented Sep 24, 2016 at 16:08

Mohit Tanwani · Accepted Answer · 2016-09-24 16:36:27Z

1

You can check if first div has checked radio, then show another div.

$(document).ready(function(){
    $('.divtop > input:radio').change(function(){
      if($(this).is(":checked"))
      {
        $('.divMiddle').removeClass('hide');  
      }
    });
});

.hide
{
  display: none;  
} 
.show
{
  display: block;  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="divtop">
    <input type="radio" name="r1" value="v1" />ONE
    <input type="radio" name="r1" value="v2" />TWO
    <input type="radio" name="r1" value="v3" />THREE
<div>
<div class="divMiddle hide">
    <input type="radio" name="r11" value="v11" /> ONE
    <input type="radio" name="r11" value="v22" /> TWO
    <input type="radio" name="r11" value="v33" /> THREE
</div>

edited Sep 24, 2016 at 16:36

answered Sep 24, 2016 at 16:27

Mohit Tanwani

6,6382 gold badges16 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sergelie Over a year ago

Perfect! thanks @loading... and how would I hide again the divMiddle if the radio buttons are brought back to the uncheck state?

Mohit Tanwani Over a year ago

@user3371049 See I've added by default hide class to the divMiddle div, if you want to hide then you just need to add that class else remove that only.

andrew · Accepted Answer · 2016-09-24 16:05:29Z

0

In response to your comment on your post, it occurs to me you could achieve what you want with some simple css only:

[type="radio"], [type="radio"]:checked + .inner{
  display:block;
}

.inner{
  display:none
}

<div class="divtop">
    <input checked type="radio" name="r1" value="v1" />
    <div class="inner">ONE</div>
    <input type="radio" name="r1" value="v2" />
    <div class="inner">TWO</div>
    <input type="radio" name="r1" value="v3" />
    <div class="inner">THREE</div>
<div>

answered Sep 24, 2016 at 16:05

andrew

9,6039 gold badges36 silver badges62 bronze badges

4 Comments

Sergelie Over a year ago

That sounds smart, I will try it!

Sergelie Over a year ago

It works well @andrew but my setup is different. There is only one div with class inner after the div including the 3 buttons, and this div should show only if one of the buttons is checked.

andrew Over a year ago

it looks like user Loading... may have a solution for you :)

Mohit Tanwani Over a year ago

@user3371049: Is it what you're looking for, I've posted answer.

Collectives™ on Stack Overflow

Check if one of the radio buttons within a div is checked

2 Answers 2

2 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related