Javascript 选中的复选框未在 UI 中更新
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10425246/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Checked Checkbox not updated in UI
提问by s_k_t
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 .
我有一个关于通过 JS 检查复选框的问题。当我通过 JS 检查复选框时，它似乎在程序中被选中，但在 UI 中它没有更新。
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>
采纳答案by s_k_t
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>
回答by Erik Philips
Instead of using attr I would highly recommend you use prop.
我强烈建议您使用prop而不是使用 attr 。
The preferred cross-browser-compatible way to determine if a checkbox is checked is to check for a "truthy" value on the element's property using one of the following:
确定是否选中复选框的首选跨浏览器兼容方法是使用以下方法之一检查元素属性上的“真实”值：
if ( elem.checked )
if ( $(elem).prop("checked") )
if ( $(elem).is(":checked") )
The .prop() method should be used to set disabled and checked instead of the .attr() method. The .val() method should be used for getting and setting value.
.prop() 方法应该用于设置禁用和检查，而不是 .attr() 方法。.val() 方法应该用于获取和设置值。
$("input").prop("disabled", false);
$("input").prop("checked", true);
$("input").val("someValue");
回答by Tejasva Dhyani
try
尝试
function setCheckedValue(toBeChecked){
document.getElementById(toBeChecked).checked=true;
alert((document.getElementById(toBeChecked).checked))
alert($('#'+toBeChecked).prop('checked'))
}
回答by Chase
Jquery-mobile appends classes for such things. Basically within that one input/label pair you have the following:
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"> </span>
</span>
</label>
</div>
What you need to do is find a way to remove and add the classes to the label and span tags. I've done this for the label, but not for the span as I'm about to finally get some sleep.
您需要做的是找到一种方法来删除和添加类到标签和跨度标签。我已经为标签做了这个，但不是为了跨度，因为我终于要睡了。
function setCheckedValue(toBeChecked){
document.getElementById(toBeChecked).checked="checked";
$("label[for='rock']").addClass("ui-checkbox-off");
$("label[for='rock']").addClass("ui-checkbox-on");
}
I did stumble across:
我确实偶然发现：
$("#checkbox-label").checkboxradio("refresh");
From: http://forum.jquery.com/topic/what-is-the-most-effective-way-of-unchecking-a-checkbox
来自：http: //forum.jquery.com/topic/what-is-the-most-effective-way-of-unchecking-a-checkbox
Not entirely the same question, I know but slightly relevant. I didn't have the chance to finagle with it and get it to work...nor did I look much more into it to see if it does even work.
不完全是同一个问题，我知道但有点相关。我没有机会解决它并让它工作......我也没有更多地研究它以查看它是否有效。
In short, the property is being set to "checked", however, the elements need to have their css refreshed in order to accommodate the new 'state'.
简而言之，该属性被设置为“已检查”，但是，元素需要刷新其 css 以适应新的“状态”。
I hope this helps!
我希望这有帮助！
