Failed to check radio button as per value and need to validate using Javascript/Jquery

Question

I need one help. I need to check radio button as per value by taking the id and validate those using Javascript/Jquery. I am explaining my code below.

<div>
  <input type="radio" name="rd0"  value="57db18">Raj
  <input type="radio" name="rd0"  value="57da17">Rahul
  <input type="radio" name="rd0"  value="57db19">Mona
</div>
<br>
<br>
<div>
  <input type="radio" name="rd1"  value="57db18">A
  <input type="radio" name="rd1"  value="57da17">B
  <input type="radio" name="rd1"  value="57db19">C

</div>
<br>
<br>
<div >
  <input type="radio" name="rd2"  value="57db18">Apple
  <input type="radio" name="rd2"  value="57da17">Orange
  <input type="radio" name="rd2"  value="57db19">Mango

</div>
    <span>
      <button type="button" id="btn" name="btn" onclick="setValue()">Set</button>
    </span>
    <span>
      <button type="button" id="vbtn" name="vbtn" onclick="validateRadioButtonValue()">Validate</button>
    </span>

Here i have 3 set of radio button and when user will click on set button the radio button should check as per given value in a loop. the scripting part is given below.

var valu = ['57da17', '57db18', '57db19'];
function setValue(){
    for(var i=0;i<valu.length;i++){
         $('#rd'+i+'[value="' + valu[i]+ '"]').prop('checked', true);
         console.log('checked btn',$('#rd'+i).is(':checked') );
    }
}

but in this current case its not happening .When user will also click on validate button ,it should verify all radio button is checked or not.Please help me.

Senjuti Mahapatra · Accepted Answer · 2016-08-01 10:24:21Z

3

Try this :

$('input[name=rd'+i+'][value="' + valu[i]+ '"]').prop('checked', true)

var valu = ['57da17', '57db18', '57db19'];
function setValue(){
    for(var i=0;i<valu.length;i++){
         
      $('input[name=rd'+i+'][value="' + valu[i]+ '"]').prop('checked', true);
         console.log('checked btn',$('input[name=rd' + i + ']').is(':checked') );
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input type="radio" name="rd0"  value="57db18">Raj
  <input type="radio" name="rd0"  value="57da17">Rahul
  <input type="radio" name="rd0"  value="57db19">Mona
</div>
<br>
<br>
<div>
  <input type="radio" name="rd1"  value="57db18">A
  <input type="radio" name="rd1"  value="57da17">B
  <input type="radio" name="rd1"  value="57db19">C

</div>
<br>
<br>
<div >
  <input type="radio" name="rd2"  value="57db18">Apple
  <input type="radio" name="rd2"  value="57da17">Orange
  <input type="radio" name="rd2"  value="57db19">Mango

</div>
    <span>
      <button type="button" id="btn" name="btn" onclick="setValue()">Set</button>
    </span>
    <span>
      <button type="button" id="vbtn" name="vbtn" onclick="validateRadioButtonValue()">Validate</button>
    </span>

edited Aug 1, 2016 at 10:24

answered Aug 1, 2016 at 10:17

Senjuti Mahapatra

2,6004 gold badges30 silver badges41 bronze badges

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

2 Comments

user5443928 Over a year ago

Check after radio button true all console is showing false.

Senjuti Mahapatra Over a year ago

@subhra: check now. The same is to be done for console logging. Earlier it showed false, because no element #answer was there in DOM

Pugazh · Accepted Answer · 2016-08-01 10:25:29Z

3

You have specified an invalid selector - # is id selector.

Combine multiple filters like this $(input[name=""][value=""]. Check below example.

$(function() {
  var valu = ['57da17', '57db18', '57db19'];

  $('#btn').click(function() {
    for (var i = 0; i < valu.length; i++) {
      $('input[name="rd' + i + '"][value="' + valu[i] + '"]').prop('checked', true);
    }
  });

  $('#vbtn').click(function() {
    for (var i = 0; i < valu.length; i++) {
      console.log('checked btn', $('input[name="rd' + i + '"]').is(':checked'));
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input type="radio" name="rd0" value="57db18">Raj
  <input type="radio" name="rd0" value="57da17">Rahul
  <input type="radio" name="rd0" value="57db19">Mona
</div>
<br>
<br>

<div>
  <input type="radio" name="rd1" value="57db18">A
  <input type="radio" name="rd1" value="57da17">B
  <input type="radio" name="rd1" value="57db19">C
</div>
<br>
<br>

<div>
  <input type="radio" name="rd2" value="57db18">Apple
  <input type="radio" name="rd2" value="57da17">Orange
  <input type="radio" name="rd2" value="57db19">Mango
</div>

<span>
  <button type="button" id="btn" name="btn">Set</button>
</span>

<span>
  <button type="button" id="vbtn" name="vbtn">Validate</button>
</span>

edited Aug 1, 2016 at 10:25

answered Aug 1, 2016 at 10:17

Pugazh

9,5715 gold badges36 silver badges57 bronze badges

4 Comments

user5443928 Over a year ago

Can you print my console message in each iteration.?

Pugazh Over a year ago

@subhra : Updated the answer. But i don't see an element with id="answer" in your question!

user5443928 Over a year ago

please check my post again.unknowingly i had done that.

Pugazh Over a year ago

@subhra - I have updated the answer. Hope this would help!

Ziv Weissman · Accepted Answer · 2016-08-01 10:25:36Z

3

You are selecting the radio btns by ID (with "#") while they don't have ID. You should select them by name.

With jQuery name select is something like this:

var valu = ['57da17', '57db18', '57db19'];
function setValue(){
    for(var i=0;i<valu.length;i++){
         $('input[name=rd'+i+'[value="' + valu[i]+ '"]').prop('checked', true);
         console.log('checked btn',$('input[name=rd'+i+']').is(':checked') );
    }
}

edited Aug 1, 2016 at 10:25

answered Aug 1, 2016 at 10:13

Ziv Weissman

4,5664 gold badges31 silver badges64 bronze badges

4 Comments

user5443928 Over a year ago

Ok,Now My any button from each set is checked but in console i am getting middle set radio button is check other two showing false.

Ziv Weissman Over a year ago

where and what is your #answer element?

user5443928 Over a year ago

check my post again.

user5443928 Over a year ago

i wanted to verify after checking each radio button in a loop.

Mohit Tanwani · Accepted Answer · 2016-08-01 10:25:54Z

Validate that at-least one radio should be checked from each group.

var valu = ['57da17', '57db18', '57db19'];
function setValue(){
   for(var i=0;i<valu.length;i++){
     $('input[name=rd'+i+'][value="' + valu[i]+ '"]').prop('checked', true);
    
   }
}
function validateRadioButtonValue(){
    for(var i=0;i<valu.length;i++){
      if(!$('input[name="rd'+i+'"]').is(":checked"))
      {
        alert("Please select checkbox named "+"rd"+i);
      }
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input type="radio" name="rd0"  value="57db18">Raj
  <input type="radio" name="rd0"  value="57da17">Rahul
  <input type="radio" name="rd0"  value="57db19">Mona
</div>
<br>
<br>
<div>
  <input type="radio" name="rd1"  value="57db18">A
  <input type="radio" name="rd1"  value="57da17">B
  <input type="radio" name="rd1"  value="57db19">C
</div>
<br>
<br>
<div>
  <input type="radio" name="rd2"  value="57db18">Apple
  <input type="radio" name="rd2"  value="57da17">Orange
  <input type="radio" name="rd2"  value="57db19">Mango
</div>
    <span>
      <button type="button" id="btn" name="btn" onclick="setValue()">Set</button>
    </span>
    <span>
      <button type="button" id="vbtn" name="vbtn" onclick="validateRadioButtonValue()">Validate</button>
    </span>

Collectives™ on Stack Overflow

Failed to check radio button as per value and need to validate using Javascript/Jquery

4 Answers 4

2 Comments

4 Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

4 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related