9

我在通过 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>
4

4 回答 4

16

我强烈建议您不要使用 attr ，而是使用prop。

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

if ( elem.checked )
if ( $(elem).prop("checked") )
if ( $(elem).is(":checked") )

应该使用 .prop() 方法来设置禁用和检查，而不是 .attr() 方法。.val() 方法应该用于获取和设置值。

$("input").prop("disabled", false);
$("input").prop("checked", true);
$("input").val("someValue");
于 2012-05-03T04:43:27.457 回答
1

在得到您所有努力的回应后，我已经开始工作，工作代码如下。

<!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>
于 2012-06-12T09:31:19.517 回答
0

尝试

function setCheckedValue(toBeChecked){
    document.getElementById(toBeChecked).checked=true;
    alert((document.getElementById(toBeChecked).checked))
    alert($('#'+toBeChecked).prop('checked'))
}
于 2012-05-03T04:46:56.140 回答
0

Jquery-mobile 为这些事情附加了类。基本上在那个输入/标签对中，您具有以下内容：

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

您需要做的是找到一种方法来删除类并将其添加到标签和跨度标签。我已经为标签做了这个，但不是为了跨度，因为我终于要睡了。

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");

来自：http: //forum.jquery.com/topic/what-is-the-most-effective-way-of-unchecking-a-checkbox

不完全是同一个问题，我知道但有点相关。我没有机会解决它并让它工作......我也没有更多地研究它，看看它是否真的有效。

简而言之，该属性被设置为“已检查”，但是，元素需要刷新其 CSS 以适应新的“状态”。

我希望这有帮助！

于 2012-05-03T05:10:26.540 回答