How to set radio Button Checked by its text value

Question

I am trying to set Radio Button Checked based on its text value

This is my HTML Code

<section class="trainers_listWrap">
   <li><label class="mt-radio mt-radio-outline traine">
      <input type="radio" data-value="One" class="trainerradio" value="62" name="trainernames">One
      <span></span>
      </label>
   </li>
   <li><label class="mt-radio mt-radio-outline traine">
      <input type="radio" data-value="Two" class="trainerradio" value="9" name="trainernames">Two
      <span></span>
      </label>
   </li>
   <li><label class="mt-radio mt-radio-outline traine">
      <input type="radio" data-value="THree" class="trainerradio" value="17" name="trainernames">THree
      <span></span>
      </label>
   </li>

</section>

I have tried as (Trying to check Two Radio Button in the above HTML )

 $('input:radio[name="trainernames"][value="Two"]').prop('checked', true);

This is my fiddle

http://jsfiddle.net/cod7ceho/376/

Could you please let me know how to set Radio button based on its text value

score 3 · Accepted Answer · edited May 23 '17 at 11:46

Problem is related to jQuery mobile you are using. To change state of radio (actually, to make this state change visible), you must target elements label, too, in this case, and add/remove appropriate classes:

$('input:radio[name="trainernames"][data-value="One"]').prev('label').addClass('ui-radio-on').removeClass('ui-radio-off');

Demo: http://jsfiddle.net/cod7ceho/377/

P.S. Probably more elegant solution can be found (not sure about jquery mobile possibilities, in this case)

EDIT:

http://jsfiddle.net/cod7ceho/378/

$('input:radio[name="trainernames"][data-value="One"]').prop('checked',true);


$("input[type='radio']").checkboxradio("refresh");

Based on answers here: Checking and unchecking radio buttons with Jquery Mobile

score 1 · Answer 2 · answered Dec 15 '16 at 08:17

1

You have set data-value so use it

$('input:radio[name="trainernames"][data-value="Two"]').prop('checked', true);

OR use correct value i.e. [value="9"]

$('input:radio[name="trainernames"][value="9"]').prop('checked', true);

answered Dec 15 '16 at 08:17

Satpal

132,252
13
159
168

Thanks Satpal i was trying the first option but its not working . – Pawan Dec 15 '16 at 08:19

score 0 · Answer 3 · answered Dec 15 '16 at 08:34

0

You can use "checked" in input like this.

<input type="radio" data-value="Two" class="trainerradio" value="9" name="trainernames" checked>

answered Dec 15 '16 at 08:34

Mubariz Feyziyev

412
4
16

score 0 · Answer 4 · answered Dec 15 '16 at 09:00

Your code is not working as you are targeting value insetead of data-value. Additionally if radio will be checked no UI will be updated as radio is shown through css:after pesudo class.

You can update your jQuery code to:

 $('.trainers_listWrap label').eq(0).click();

How to set radio Button Checked by its text value

4 Answers4