使用 jquery 选中/取消选中复选框?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/17420534/
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
check / uncheck checkbox using jquery?
提问by Irfan Ahmed
I have some input text fields in my page and am displaying their values using JavaScript.
我的页面中有一些输入文本字段,并且正在使用 JavaScript 显示它们的值。
I am using .set("value","")
function to edit the value, add an extra checkbox field, and to pass a value.
我正在使用.set("value","")
函数来编辑值,添加一个额外的复选框字段,并传递一个值。
Here I want to check that if value == 1
, then this checkbox should be checked. Otherwise, it should remain unchecked.
在这里,我想检查 if value == 1
,则应选中此复选框。否则,它应该保持未选中状态。
I did this by using two divs, but I am not feeling comfortable with that, is there any other solution?
我通过使用两个 div 来做到这一点,但我对此感到不舒服,还有其他解决方案吗?
if(value == 1) {
$('#uncheck').hide();
$('#check').show();
} else{
$('#uncheck').show();
$('#check').hide();
}
回答by Eric
For jQuery 1.6+ :
对于 jQuery 1.6+ :
.attr()is deprecated for properties; use the new .prop()function instead as:
.attr()不推荐用于属性;使用新的.prop()函数代替:
$('#myCheckbox').prop('checked', true); // Checks it
$('#myCheckbox').prop('checked', false); // Unchecks it
For jQuery < 1.6:
对于 jQuery < 1.6:
To check/uncheck a checkbox, use the attribute checked
and alter that. With jQuery you can do:
要选中/取消选中复选框,请使用该属性checked
并更改它。使用 jQuery,您可以执行以下操作:
$('#myCheckbox').attr('checked', true); // Checks it
$('#myCheckbox').attr('checked', false); // Unchecks it
Cause you know, in HTML, it would look something like:
因为你知道,在 HTML 中,它看起来像:
<input type="checkbox" id="myCheckbox" checked="checked" /> <!-- Checked -->
<input type="checkbox" id="myCheckbox" /> <!-- Unchecked -->
However, you cannot trust the .attr() method to get the value of the checkbox (if you need to). You will have to rely in the .prop()method.
但是,您不能信任 .attr() 方法来获取复选框的值(如果需要)。您将不得不依赖.prop()方法。
回答by Rohan Kumar
You can use prop()for this, as Before jQuery 1.6, the .attr()method sometimes took property values into account when retrieving some attributes, which could cause inconsistent behavior. As of jQuery 1.6, the .prop()
method provides a way to explicitly retrieve property values, while .attr()
retrieves attributes.
您可以为此使用prop(),因为在 jQuery 1.6 之前,.attr()方法有时在检索某些属性时会考虑属性值,这可能会导致不一致的行为。从 jQuery 1.6 开始,该.prop()
方法提供了一种在检索属性的同时显式检索属性值的方法.attr()
。
var prop=false;
if(value == 1) {
prop=true;
}
$('#checkbox').prop('checked',prop);
orsimply,
或者干脆,
$('#checkbox').prop('checked',(value == 1));
Snippet
片段
$(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">
回答by billyonecan
You can set the state of the checkbox based on the value:
您可以根据值设置复选框的状态:
$('#your-checkbox').prop('checked', value == 1);