Selecting Checkboxes, Radio buttons and list

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);

Answer 2

$("#option_checkbox_1").val(option_id);

This is used to assign the value to the element .

You can Element with attribute value selector to find the element .

var valueFromDB = "1";
$("input[type='radio']['"+valueFromDB+"']").attr("checked","true");
$("input[type="checkbox"]['"+valueFromDB+"']").attr("checked","true");
$("#option_list option[value="20"]").attr("selected","true");

Another Point .

id is an unique for an element . You can't use id for multiple elements .

Answer 3

To select the input element that has a particular value:

$('input[value=' + valueFromDatabase + ']');

To then check/select that element:

$('input[value=' + valueFromDatabase + ']').prop('checked', true);

This can, of course, be combined with other selectors (such as the :radio , or :checkbox ):

$('input:radio[value=' + valueFromDatabase + ']').prop('checked', true);

If the value from the database contains any white-space, though, the value must be quoted in the selector, giving:

$('input[value="' + valueFromDatabase + '"]');

(Note the " characters surrounding the `valueFromDatabase.)

Answer 4

That JS will set the value of the elements, it won't check them. What you want to do is use an if statement to see if the value of the radio/checkbox/select matches that of the string you're pulling from the database. If it does you then want to set the attribute to be checked/selected like so

// checkboxes/radios
$(this).attr('checked','checked')

// options
$(this).attr('selected','selected')

where $(this) = the input or the option