0

I try to set a radio button in a group without directly click on the button. Aim is to open a jQuery page and depending on a stored value the related radio button should be set. I read a lot of similar articles and tried the solutions of this but no one works in my case. I created a jsfiddle to show my use case: http://jsfiddle.net/yZejX/2/ .

HTML:

<input type="radio" name="test" id="radio-choice-1" value="3">Test1</input>
<br>
<input type="radio" name="test" id="radio-choice-2" value="4">Test2</input>
<br>
<input type="radio" name="test" id="radio-choice-3" value="5">Test3</input>

JS:

// try to set the attribute directly
$("#radio-choice-1").attr('data-icon','radio-on');
$("#radio-choice-2").attr('data-icon','radio-off');
$("#radio-choice-3").attr('data-icon','radio-off');

// try to set via click event
$("#radio-choice-2").click();

// try to set via changing attribute and call change event to update
$("#radio-choice-2").attr('checked','checked').change();

// try to set via reset checked element and changing attribute
$("input[name='test']:checked").removeAttr('checked');
$("input[name='test'][value='3']").attr('checked',true).change();
$("input[name='test'][value='3']").attr('checked','checked').change();

Has somebody an idea what I did wrong and where the mistake is?

Thank you very much in advance for your help.

Kiran
  • 20,167
  • 11
  • 67
  • 99
Thomas
  • 345
  • 2
  • 6
  • 12
  • possible duplicate of [How to check "checkbox" dynamically - jQuery Mobile](http://stackoverflow.com/questions/17027566/how-to-check-checkbox-dynamically-jquery-mobile) - `$('.selector').prop('checked', true).checkboxradio('refresh');` – Omar Aug 27 '13 at 09:37

4 Answers4

0
 $("#radio-choice-2").attr('checked','checked');

http://jsfiddle.net/yZejX/4/

  • Big thanks for your help. Now it works at the jsfiddle but not at my application. The only difference is that I call a function, which contains the code. If the radio button group is preselected (I click e.g. on the third button) and I try to change it with your code, nothing happens :-(. – Thomas Aug 27 '13 at 09:14
  • can you post the code where you check _If the radio button group is preselected _? –  Aug 27 '13 at 09:31
  • I solved my problem (see my answer). Thank you for helping and quick resonse. – Thomas Aug 27 '13 at 09:37
0

To set the status of radio button, here is what you do in javascript 

 radiobtn = document.getElementById("radio-choice-1");
 radiobtn.checked = true;
Prasanna Aarthi
  • 3,439
  • 4
  • 26
  • 48
  • This solution works also fine for the unselected case. But I have the problem that I see at the HTML code the correct radio button as selected and the browser displays a different one :-(. I get this case when I go to the page and the correct value is selected via your solution. Now I change via click to another radio button and leave the page. Now I call the page again and the browser shows me the clicked radio button and not the one I selected via script. i hope it is not to confusing. – Thomas Aug 27 '13 at 09:26
0

You can render it checked with something like this:

document.getElementById('radio-choice-1').checked=true;

Or, if you prefer to stick to jQuery:

$('#radio-choice-2').prop('checked','true');
Julio María Meca Hansen
  • 1,303
  • 1
  • 17
  • 37
  • This solution works also fine for the unselected case. But I have the problem that I see at the HTML code the correct radio button as selected and the browser displays a different one :-(. I get this case when I go to the page and the correct value is selected via your solution. Now I change via click to another radio button and leave the page. Now I call the page again and the browser shows me the clicked radio button and not the one I selected via script. I hope it is not to confusing. – Thomas Aug 27 '13 at 09:27
0

Thank you very much for your quick response and for all solutions. Each works and is great. I solved my problem with a refresh after changing the radio button:

HTML

<input class="rbgroup1" type="radio" name="test" id="radio-choice-1" value="3" checked>Test1</input>
<br>
<input class="rbgroup1" type="radio" name="test" id="radio-choice-2" value="4">Test2</input>
<br>
<input class="rbgroup1" type="radio" name="test" id="radio-choice-3" value="5">Test3</input>

JS

$(".rbgroup1").checkboxradio("refresh");

Now it seems that it works. I thought that changing the checked attribute is enough, but that was not in my case.

Have a nice day.

Greetings, Thomas

Thomas
  • 345
  • 2
  • 6
  • 12