Question

我有一个关于通过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>

Answer 1

我强烈建议您使用prop。

而不是使用attr

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

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

.prop（）方法应该用于设置disabled和checked而不是.attr（）方法。应该使用.val（）方法来获取和设置值。

$("input").prop("disabled", false);
$("input").prop("checked", true);
$("input").val("someValue");

Answer 2

我在收到您所有努力的回复后工作，工作代码如下。

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

Answer 3

尝试

function setCheckedValue(toBeChecked){
    document.getElementById(toBeChecked).checked=true;
    alert((document.getElementById(toBeChecked).checked))
    alert($('#'+toBeChecked).prop('checked'))
}

Answer 4

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>

您需要做的是找到一种方法来删除标签和span标签并将其添加到标签中。我已经为标签做了这个，但是因为我最终要睡觉了所以没有这个。

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才能容纳新的“状态”。

我希望这有帮助！

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

4 个答案: