Checked Checkbox not updated in UI

checkbox, html, javascript, jquery

Solution

I have worked after getting response from all of your efforts and the working code is below.

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Check</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 getCheckedValue()
    {
    return (document.getElementById("rock").checked);
    //return $('input[name=music]').checked;
     }

    function setCheckedValue(checkboxName,toBeChecked){
        $('input[name='+checkboxName+']').prop("checked", true).checkboxradio("refresh");
    }
    </script>
</head> 
<body> 
<div data-role="page">
    <div data-role="header">
            <h1>What kind/s of music do you listen to?</h1>
    </div><!-- /header -->
    <div data-role="content">   
        <input type="checkbox" class="music" name="music" id="rock" value="rock" >
        <label for="rock">Rock</label>
        <input type="button" value="Get" onclick="alert(getCheckedValue())">
        <input type="button" value="Set" onclick="setCheckedValue('music','rock') ">
    </div>
</div>
</body>
</html>

Problem

I have a problem regarding checking checkbox by JS.When I checked the checkbox by JS it seems like in program that it's checked but in UI it's not updated . if anyone have solution for this ``` <!DOCTYPE html> <html> <head> <title>Check</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 getCheckedValue() { return ((document.getElementById("rock").checked)); } function setCheckedValue(toBeChecked){ document.getElementById(toBeChecked).checked="checked"; alert((document.getElementById(toBeChecked).checked)) alert($('#'+toBeChecked).attr('checked')) } </script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>What kind/s of music do you listen to?</h1> </div><!-- /header --> <div data-role="content"> <input type="checkbox" class="music" name="music" id="rock" value="rock" > <label for="rock">Rock</label> <input type="button" value="Get" onclick="alert(getCheckedValue())"> <input type="button" value="Set" onclick="setCheckedValue('rock') "> </div> </div> </body> </html> ```

Original source