我在我的页面上有一些输入文本字段,并使用JavaScript显示它们的值。
我使用.set("value","")
函数来编辑值,添加一个额外的复选框字段,并传递一个值。
这里我想检查一下,如果value == 1
,那么这个复选框应该被选中。否则,它应该保持不被选中。
我通过使用两个div实现了这一点,但我觉得这样做不太合适,有什么其他的解决方案吗?
if(value == 1) {
$('#uncheck').hide();
$('#check').show();
} else{
$('#uncheck').show();
$('#check').hide();
}
适用于jQuery 1.6+ :
.attr() 对于属性来说已经过时了;使用新的.prop() 函数代替。
$('#myCheckbox').prop('checked', true); // Checks it
$('#myCheckbox').prop('checked', false); // Unchecks it
适用于jQuery < 1.6:
要检查/取消一个复选框,使用属性checked
并改变它。使用jQuery,你可以这样做。
$('#myCheckbox').attr('checked', true); // Checks it
$('#myCheckbox').attr('checked', false); // Unchecks it
因为你知道,在HTML中,它会看起来像。
<input type="checkbox" id="myCheckbox" checked="checked" /> <!-- Checked -->
<input type="checkbox" id="myCheckbox" /> <!-- Unchecked -->
然而,你不能相信.attr()方法来获取复选框的值(如果你需要)。你将不得不依赖.prop()方法。
你可以使用prop(),因为在jQuery 1.6之前,.attr()方法在检索一些属性时有时会考虑到属性值,这可能导致不一致的行为。从jQuery 1.6开始,.prop()
方法提供了一个明确检索属性值的方法,而.attr()
检索属性。
var prop=false;
if(value == 1) {
prop=true;
}
$('#checkbox').prop('checked',prop);
或简单。
$('#checkbox').prop('checked',(value == 1));
摘录
<!--开始片段:js hide: false console: true babel: false -->
$(document).ready(function() {
var chkbox = $('.customcheckbox');
$(".customvalue").keyup(function() {
chkbox.prop('checked', this.value==1);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h4>This is a domo to show check box is checked
if you enter value 1 else check box will be unchecked </h4>
Enter a value:
<input type="text" value="" class="customvalue">
<br>checkbox output :
<input type="checkbox" class="customcheckbox">
<!--结束片段-->