Javascript 选中的复选框未在UI中更新_Javascript_Jquery_Html_Checkbox

Javascript 选中的复选框未在UI中更新

javascript jquery html checkbox

Javascript 选中的复选框未在UI中更新,javascript,jquery,html,checkbox,Javascript,Jquery,Html,Checkbox,我有一个关于JS检查复选框的问题。当我通过JS检查复选框时，在程序中它似乎被选中了，但在UI中它没有更新如果有人能解决这个问题 <!DOCTYPE html> <html> <head> <title>Check</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link

我有一个关于JS检查复选框的问题。当我通过JS检查复选框时，在程序中它似乎被选中了，但在UI中它没有更新

如果有人能解决这个问题

<!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>


检查
函数getCheckedValue（）
{
返回（（document.getElementById（“rock”）.checked））；
}
函数setCheckedValue（待检查）{
document.getElementById（toBeChecked）.checked=“checked”；
警报（（document.getElementById（toBeChecked）.checked））
警报（$（'#'+toBeChecked）.attr（'checked'））
}
你听什么样的音乐？
摇滚乐

我强烈建议您不要使用attr

确定是否选中复选框的首选跨浏览器兼容方式是使用以下选项之一检查元素属性上的“truthy”值：

<div class="ui-checkbox">
  <input type="checkbox" class="music" name="music" id="rock" value="rock">
  <label for="rock" data-corners="true" data-shadow="false" data-iconshadow="true" data-  wrapperels="span" data-icon="checkbox-off" data-theme="c" class="ui-btn ui-btn-corner-all ui-btn-icon-left ui-checkbox-off ui-checkbox-on ui-btn-up-c">

    <span class="ui-btn-inner ui-btn-corner-all">
      <span class="ui-btn-text">Rock</span>
      <span class="ui-icon ui-icon-checkbox-off ui-icon-shadow">&nbsp;</span>
    </span>
  </label>
</div>

应使用.prop（）方法来设置禁用和选中，而不是.attr（）方法。.val（）方法应用于获取和设置值

试一试

jquerymobile为这些东西附加了类。基本上，在该输入/标签对中，您有以下内容：

<div class="ui-checkbox">
  <input type="checkbox" class="music" name="music" id="rock" value="rock">
  <label for="rock" data-corners="true" data-shadow="false" data-iconshadow="true" data-  wrapperels="span" data-icon="checkbox-off" data-theme="c" class="ui-btn ui-btn-corner-all ui-btn-icon-left ui-checkbox-off ui-checkbox-on ui-btn-up-c">

    <span class="ui-btn-inner ui-btn-corner-all">
      <span class="ui-btn-text">Rock</span>
      <span class="ui-icon ui-icon-checkbox-off ui-icon-shadow">&nbsp;</span>
    </span>
  </label>
</div>

我确实偶然发现：

$("#checkbox-label").checkboxradio("refresh");

发件人：

我知道不是完全相同的问题，但有点相关。我没有机会玩弄它，让它发挥作用……我也没有更多地研究它，看看它是否真的起作用

简而言之，属性被设置为“checked”，但是，元素需要刷新css以适应新的“state”

我希望这有帮助

在得到您所有努力的响应后，我一直在工作，工作代码如下

<!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>


检查
函数getCheckedValue（）
{
返回（document.getElementById（“rock”）。已选中）；
//返回$（'input[name=music]'）。选中；
}
函数setCheckedValue（checkboxName，toBeChecked）{
$（'input[name='+checkboxName+']'）。prop（“选中”，true）。checkboxradio（“刷新”）；
}
你听什么样的音乐？
摇滚乐

感谢大家的支持，现在在看到所有答案后，我找到了下面的解决方案：代码函数setCheckedValue（toBeChecked）{//document.getElementById（toBeChecked）。checked=“checked”；$（“input[name=music]”。prop（“checked”，true）；$（“label[For='rock']）。addClass（“ui复选框打开”）$(“span”）.addClass（“打开的ui图标复选框”）；}我没有办法在Span中给出样式…正如我为复选框指定了Span样式，所有Span元素都需要它sumit，我会在下班回家后再进一步研究，如果我发现了什么，请告诉你。我昨晚确实在尝试让它工作，但没有成功。如果你找到一个可以接受的答案，请告诉你你的问题,，

function setCheckedValue(toBeChecked){
    document.getElementById(toBeChecked).checked="checked";
    $("label[for='rock']").addClass("ui-checkbox-off");
    $("label[for='rock']").addClass("ui-checkbox-on");
}

$("#checkbox-label").checkboxradio("refresh");

<!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>