选中的复选框在UI中未更新 [英] Checked Checkbox not updated in UI
本文介绍了选中的复选框在UI中未更新的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个问题关于检查复选框的JS。当我选中复选框的JS它似乎在程序中，它是检查，但在UI它没有更新。如果任何人有此解决方案
<！DOCTYPE html&
< html>
< head>
< title>检查< / title>
< meta name =viewportcontent =width = device-width，initial-scale = 1>
< link rel =stylesheethref =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）。
}
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>您要听什么样的音乐？< / h1>
< / div><！ - / header - >
< div data-role =content>
< input type =checkboxclass =musicname =musicid =rockvalue =rock>
< label for =rock> Rock< / label>
< input type =buttonvalue =Getonclick =alert（getCheckedValue（））>
< input type =buttonvalue =Setonclick =setCheckedValue（'rock'）>
< / div>
< / div>
< / body>
< / html>
解决方案
工作代码如下。
<！DOCTYPE html>
< html>
< head>
< title>检查< / title>
< meta name =viewportcontent =width = device-width，initial-scale = 1>
< link rel =stylesheethref =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）。
// return $（'input [name = music]'）。checked;
}
function setCheckedValue（checkboxName，toBeChecked）{
$（'input [name ='+ checkboxName +']'）。prop（checked，true）.checkboxradio （刷新）;
}
< / script>
< / head>
< body>
< div data-role =page>
< div data-role =header>
< h1>您要听什么样的音乐？< / h1>
< / div><！ - / header - >
< div data-role =content>
< input type =checkboxclass =musicname =musicid =rockvalue =rock>
< label for =rock> Rock< / label>
< input type =buttonvalue =Getonclick =alert（getCheckedValue（））>
< input type =buttonvalue =Setonclick =setCheckedValue（'music'，'rock'）>
< / div>
< / div>
< / body>
< / html>
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 .
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>
解决方案
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>
这篇关于选中的复选框在UI中未更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
