check uncheck Yes No radio button programmatically jQuery Mobile

Question

I have a database in which I get value 0 or 1 (No/Yes respectively).
How do I check/uncheck radio button and check its state in jQuery Mobile. My code is below

HTML code

<label>Are you Mad? </label>   
 <fieldset data-role="controlgroup" data-type="horizontal">     
 <input data-mini="true" type="radio" name="rdIsBP" id="rdIsBPYes" value="" />
 <label for="rdIsBPYes">YES</label>
 <input data-mini="true"  type="radio" name="rdIsBP" id="rdIsBPNo" value="choice-1"  />
 <label for="rdIsBPNo">NO</label>
</fieldset>

JavaScript code

function  CheckRadioStateYNoo(val,rdButton){      
      try{
      var radios = document.getElementsByName(rdButton);
      for( i = 0; i < radios.length; i++ ) {
       if(i==0)
       {
          if(val==1) 
          {
              //radios[i].checked=true;
              $("#" + rdButton + "Yes").attr ("checked", "checked");
              alert('rdButton' +   radios[i].checked);               
          }          
      }
       else{
           if(val==1) 
           {
               radios[i].checked=true;
               alert('rdButton' +  radios[i].checked);               
           }
       }
      }
      }
      catch(e){alert(e);}
    }

Solution 1

i tried many experiments only this code is working for me
val can be 0 for unchceck and 1 for checked in db.maybe some one find it useful

html code

<label> Have you had surgery within the last 12 months?</label> 
            <fieldset data-role="controlgroup" data-type="horizontal">

            <input data-mini="true" type="radio" name="rdIsSurgery" id="rdIsSurgeryYes" value="choice-1" />
            <label for="rdIsSurgeryYes">YES</label>


            <input data-mini="true"  type="radio" name="rdIsSurgery" id="rdIsSurgeryNo" value="choice-4"  />
            <label for="rdIsSurgeryNo">NO</label>
    </fieldset>  

js code

 function  CheckRadioStateYN(val,rdButton){      
     try{
             if (val==1){               
                 $('#' + rdButton + 'Yes').attr('checked', true).checkboxradio('refresh');
                 $('#' + rdButton + 'No').removeAttr('checked');          
                     }
         else{
         $('#' + rdButton + 'No').attr('checked', true).checkboxradio('refresh');
         $('#' + rdButton + 'Yes').removeAttr('checked');

         }        
        }
          catch(e)
          {alert(e);}
        }

Solution 2

$('#rdIsBPYes').prop('checked', value);
$('#rdIsBPNo').prop('checked', !value);

This is the preferred way to do it with jQuery 1.6 onwards.

If you have jQuery older that 1.6 you can do:

if (value) {
   $('#rdIsBPYes').attr('checked','checked');
   $('#rdIsBPNo').removeAttr('checked');
} else {
   $('#rdIsBPNo').attr('checked','checked');
   $('#rdIsBPYes').removeAttr('checked');
}

UPDATE: I mislead syntax for .prop() , now corrected

Comments

[skhurams]

i dont want to change its value only its state ie checked or uncheck

[Nelson]

That is what above code does, it does not change value, it changes checked state, try it..

[skhurams]

Eclipse is giving error The left-hand side of an assignment must be a variable

[Nelson]

Yes I had an error in my answer, I've corrected it now, check my updated answer code.

[skhurams]

not working for me still saying The left-hand side of an assignment must be a variable

[Nelson]

Sorry, not enough coffee for me today :-) , I've updated my answer with a hopefully correct solution for you now. Check it out :-)