CODEWITHSUNDEEP
javascriptjqueryhtmljquery-mobileradio-button
s_k_t
s_k_t

Reputation: 739

Checked Radio Button not updated in UI

I have checked radio button using Jquery buts its not updated in UI . Anyone has any idea .below is my snippets...

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Radio Button</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
    <script>
    function getValue() {  
    alert("Value is :"+$('input[name=animal]:checked').val());
    }

    function setValue(toBeSetID) {  
    $("input[name=animal][id=radio-choice-2]").prop("checked", true);
    $("label[for='rock']").addClass("ui-radio-on");
    alert("Value is :"+$('input[name=animal]:checked').val());
    }
    </script>
    </head> 
<body> 
<div data-role="page">
<div data-role="header">
    <h1>Radio Button</h1>
</div><!-- /header -->
<div data-role="content">   
    <input type="radio" name="animal" id="cat" value="Cat" />
    <label for="cat">Cat</label>
    <input type="radio" name="animal" id="radio-choice-2" value="choice-2"/>
    <label for="radio-choice-2">Dog</label>
    <input type="radio" name="animal" id="radio-choice-3" value="choice-3"  />
    <label for="radio-choice-3">Hamster</label>
    <input type="radio" name="animal" id="radio-choice-4" value="choice-4"  />
    <label for="radio-choice-4">Lizard</label>
    <input type="button" value="Get Radio Button Value" onclick="getValue();">
    <input type="button" value="Set Radio Button Value" onclick="setValue();">
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>

Its Checked by programm as alert box says But not updated in UI.

Upvotes: 1

Views: 2634

Answers (1)

Fr&#233;d&#233;ric Hamidi
Fr&#233;d&#233;ric Hamidi

Reputation: 262919

As Chase says in his answer to your other question, you have to refresh the jQuery Mobile widget when you change the checked property of the underlying form element. This can be done by writing:

$("input[name=animal][id=radio-choice-2]")
    .prop("checked", true).checkboxradio("refresh");

That way, you do not have to manipulate the classes yourself, the mobile widget does all the work.

Note in passing that your selector targets an element that has an id attribute, so it can be simplified:

$("#radio-choice-2").prop("checked", true).checkboxradio("refresh");

Upvotes: 1

Related Questions