选中的复选框未在 UI 中更新
Posted
技术标签:
【中文标题】选中的复选框未在 UI 中更新【英文标题】：Checked Checkbox not updated in UI 【发布时间】：2012-05-12 14:32:42 【问题描述】：我在通过 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>
【问题讨论】：
如果您找到了可以接受的问题答案，please mark the answer as accepted. 【参考方案1】：我强烈建议您使用 prop，而不是使用 attr。
确定是否选中复选框的首选跨浏览器兼容方法是使用以下方法之一检查元素属性上的“真实”值：
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");
【讨论】：
【参考方案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>
【讨论】：
【参考方案3】：试试
function setCheckedValue(toBeChecked)
document.getElementById(toBeChecked).checked=true;
alert((document.getElementById(toBeChecked).checked))
alert($('#'+toBeChecked).prop('checked'))
【讨论】：
【参考方案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"> </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 以适应新的“状态”。
我希望这会有所帮助！
【讨论】：
感谢大家的支持，现在看到所有答案后，我已经达到了我的解决方案下面是代码函数 setCheckedValue(toBeChecked) //document.getElementById(toBeChecked).checked="checked" ; $("input[name=music]").prop("checked", true); $("label[for='rock']").addClass("ui-checkbox-on"); $("span").addClass("ui-icon-checkbox-on"); 我有什么方法可以在 Span 中给出样式...正如我为复选框指定了 span 样式，它需要所有 span 元素 Sumit，等我下班回家后我会再调查一下，如果有什么发现会告诉你的。昨晚我确实搞砸了，试图让它工作，但没有成功。以上是关于选中的复选框未在 UI 中更新的主要内容，如果未能解决你的问题，请参考以下文章
WPF 根据 UI 线程控制状态更新 NON UI 线程数据