Question

I have a problem checking/selecting radiobuttons, checkboxes and list styles at runtime using jQuery/jQuery Mobile.

Basically I have a list of checkboxes, radio buttons and select menus and what I would like to do is get the value from the database and select/tick the correct item from the checkbox/radio button group or select menu.

Here is a simple setup of what I have tried, but it did not work.

HTML:

<fieldset data-role="controlgroup">     
  <input type="radio" name="option_radio" id="option_radio_1" value="1" />
  <label for="option_radio_1">Option 1</label>  
  <input type="radio" name="option_radio" id="option_radio_2" value="2" />
  <label for="option_radio_2">Option 2</label>
</fieldset>

<fieldset data-role="controlgroup">     
  <input type="checkbox" name="option_checkbox" id="option_checkbox_1" value="1" />
  <label for="option_checkbox_1">Option 1</label>   
  <input type="checkbox" name="option_checkbox2" id="option_checkbox_2" value="2" />
  <label for="option_checkbox_2">Option 2</label>   
  <input type="checkbox" name="option_checkbox3" id="option_checkbox_3" value="3" />
  <label for="option_checkbox_3">Option 3</label>
</fieldset>

<select name="option_list" id="option_list">
  <option value="20">20</option>
  <option value="30">30</option>
  <option value="40">40</option>
  <option value="50">50</option>
  <option value="60">60</option>
  <option value="70">70</option>
</select> 

JS:

$("#option_checkbox_1").val(option_id); 
$("#option_list").val(optionlist_id);
$('input:radio[name=gender]:checked').val(gender_id);

What I tried is passing the value from the database (example 1/2/3/4 etc) from the database directly to the element.

Can anyone tell me how this should be done exactly?

Answer 1

To check it or give a value:

$('#option_checkbox_1').attr('checked', 'checked');
$('input:radio[id=option_radio_1]').attr('checked', 'checked');
$("#option_list").val(50);

and for un-checking (by removing the attribute entirely) do

$('#option_checkbox_1').removeAttr('checked');
$('input:radio[name=gender]:checked').removeAttr('checked');

I think here is what you want

$('#option_checkbox_'+option_id).attr('checked', 'checked');
$('input:radio[id='+gender_id+']').attr('checked', 'checked');
$("#option_list").val(optionlist_id);