使用javascript将JSON数据插入单选输入

Question

I have a DB, where a php post values with JSON to my app. My wish is to fill the values into the inputs where they original was user generated.

I can use this command to fill text inputs:

document.getElementById("value1").value=item.value1;

But how do i return the value to radio input?

Answer 1

Set the checked attribute like so:

document.getElementById('radioId').checked = 'checked';

Inversely, you can remove the attribute to uncheck it:

document.getElementById('radioId').removeAttribute('checked'); 

Write example:

<input id="maleRadioBox" type="radio" name="sex" value="male">Male<br>
<input id="femaleRadioBox" type="radio" name="sex" value="female" checked>Female</input>
[...]
if( values.maleChecked )
   document.getElementById('maleRadioBox').checked = 'checked';
else
   document.getElementById('maleRadioBox').removeAttribute('checked');
if( values.femaleChecked )
   document.getElementById('femaleRadioBox').checked = 'checked';
else
   document.getElementById('femaleRadioBox').removeAttribute('checked');

Read example:

<input id="maleRadioBox" type="radio" name="sex" value="male" checked>Male<br>
<input id="femaleRadioBox" type="radio" name="sex" value="female">Female</input>
[...]
if( document.getElementById('maleRadioBox').hasAttribute('checked') )
   values.maleChecked = 'checked';
// or maybe values.maleChecked = document.getElementById('maleRadioBox').hasAttribute('checked');
if( document.getElementById('femaleRadioBox').hasAttribute('checked') )
   values.femaleChecked = 'checked';
// or maybe values.femaleChecked = document.getElementById('femaleRadioBox').hasAttribute('checked');

You could always make a function to simplify it:

function updateRadioInput( id, checked ) {
  if( checked )
    document.getElementById( id ).checked = 'checked';
  else
    document.getElementById( id ).removeAttribute('checked');
}

updateRadioInput( 'maleChecked', values.isMaleChecked );
updateRadioInput( 'femaleChecked', values.isFemaleChecked );
// etc...