提问人:tpower 提问时间:1/9/2009 最后编辑:Peter Mortensentpower 更新时间:8/2/2023 访问量:3817547
使用jQuery为复选框设置“选中”
Setting "checked" for a checkbox with jQuery
问:
我想做这样的事情来勾选使用jQuery:checkbox
$(".myCheckBox").checked(true);
或
$(".myCheckBox").selected(true);
这样的事情存在吗?
答:
你可以做
$('.myCheckbox').attr('checked',true) //Standards compliant
或
$("form #mycheckbox").attr('checked', true)
如果 onclick 事件中有要触发的复选框的自定义代码,请改用以下代码:
$("#mycheckbox").click();
您可以通过完全删除该属性来取消选中:
$('.myCheckbox').removeAttr('checked')
您可以像这样选中所有复选框:
$(".myCheckbox").each(function(){
$("#mycheckbox").click()
});
评论
$(".myCheckbox").click()
.attr
.prop
$("#mycheckbox").click();
对我有用,因为我也在听更改事件,并且没有触发更改事件。.attr
.prop
现代 jQuery
使用 .prop()
:
$('.myCheckbox').prop('checked', true);
$('.myCheckbox').prop('checked', false);
DOM API
如果只使用一个元素,则始终可以只访问基础 HTMLInputElement
并修改其 .checked
属性:
$('.myCheckbox')[0].checked = true;
$('.myCheckbox')[0].checked = false;
使用 and 方法而不是这样做的好处是它们将对所有匹配的元素进行操作。.prop()
.attr()
jQuery 1.5.x 及更低版本
该方法不可用,因此您需要使用 .attr()。
.prop()
$('.myCheckbox').attr('checked', true);
$('.myCheckbox').attr('checked', false);
请注意,这是 jQuery 1.6 版之前的单元测试使用的方法,并且比使用更可取,因为如果最初选中该框,后者将更改对 .reset()
调用的行为,其中包含它的任何形式 - 一个微妙但可能不受欢迎的行为更改。$('.myCheckbox').removeAttr('checked');
有关更多上下文,可以在 1.6 版发行说明和 .prop()
文档的属性与属性部分中找到一些关于从 1.5.x 过渡到 1.6 时对属性/属性处理更改的不完整讨论。checked
评论
DOMElement.checked = true
$(element).prop('checked')
element.checked
element
用:
$(".myCheckbox").attr('checked', true); // Deprecated
$(".myCheckbox").prop('checked', true);
如果要检查复选框是否被选中:
$('.myCheckbox').is(':checked');
评论
$("#mycheckbox")[0].checked = true;
$("#mycheckbox").attr('checked', true);
$("#mycheckbox").click();
最后一个将触发复选框的 click 事件,其他则不会。 因此,如果 onclick 事件中有要触发的复选框的自定义代码,请使用最后一个代码。
评论
.attr
.prop
click
您还可以使用新方法扩展 $.fn 对象:
(function($) {
$.fn.extend({
check : function() {
return this.filter(":radio, :checkbox").attr("checked", true);
},
uncheck : function() {
return this.filter(":radio, :checkbox").removeAttr("checked");
}
});
}(jQuery));
然后你可以做:
$(":checkbox").check();
$(":checkbox").uncheck();
或者,您可能希望为它们提供更独特的名称,例如 mycheck() 和 myuncheck(),以防您使用使用这些名称的其他库。
评论
.attr
.prop
这将选择具有指定属性的元素,其值包含给定的子字符串“ckbItem”:
$('input[name *= ckbItem]').prop('checked', true);
它将选择其 name 属性中包含 ckbItem 的所有元素。
要选中复选框,您应该使用
$('.myCheckbox').attr('checked',true);
或
$('.myCheckbox').attr('checked','checked');
要取消选中复选框,应始终将其设置为 false:
$('.myCheckbox').attr('checked',false);
如果你这样做
$('.myCheckbox').removeAttr('checked')
它会一起删除该属性,因此您将无法重置表单。
糟糕的演示 jQuery 1.6.我认为这已经坏了。对于 1.6,我将就此发表一篇新文章。
新的工作演示 jQuery 1.5.2 可在 Chrome 中使用。
两个演示都使用
$('#tc').click(function() {
if ( $('#myCheckbox').attr('checked')) {
$('#myCheckbox').attr('checked', false);
} else {
$('#myCheckbox').attr('checked', 'checked');
}
});
评论
$(".mycheckbox").prop("checked", true/false)
这是使用jQuery选中和取消选中复选框的正确方法,因为它是跨平台标准,并且允许表单重新发布。
$('.myCheckBox').each(function(){ this.checked = true; });
$('.myCheckBox').each(function(){ this.checked = false; });
通过这样做,您正在使用 JavaScript 标准来选中和取消选中复选框,因此任何正确实现 checkbox 元素的“checked”属性的浏览器都将完美地运行此代码。这应该是所有主流浏览器,但我无法测试 Internet Explorer 9 之前的版本。
问题 (jQuery 1.6):
用户单击复选框后,该复选框将停止响应“选中”属性更改。
下面是一个示例,说明在有人点击复选框后,复选框属性无法完成工作(这在 Chrome 中发生)。
解决方案:
通过在 DOM 元素上使用 JavaScript 的 “checked” 属性,我们能够直接解决问题,而不是试图操纵 DOM 来做我们希望它做的事情。
该插件将更改jQuery选择的任何元素的checked属性,并在所有情况下成功选中和取消选中复选框。因此,虽然这似乎是一个过于霸道的解决方案,但它将使您网站的用户体验更好,并有助于防止用户感到沮丧。
(function( $ ) {
$.fn.checked = function(value) {
if(value === true || value === false) {
// Set the value of the checkbox
$(this).each(function(){ this.checked = value; });
}
else if(value === undefined || value === 'toggle') {
// Toggle the checkbox
$(this).each(function(){ this.checked = !this.checked; });
}
return this;
};
})( jQuery );
或者,如果您不想使用插件,可以使用以下代码片段:
// Check
$(':checkbox').prop('checked', true);
// Un-check
$(':checkbox').prop('checked', false);
// Toggle
$(':checkbox').prop('checked', function (i, value) {
return !value;
});
评论
removeAttr('checked')
attr('checked', false)
checked
$('.myCheckBox').prop('checked', true)
prop
我们可以与jQuery一起使用来检查属性:elementObject
$(objectElement).attr('checked');
我们可以将其用于所有jQuery版本,而不会出现任何错误。
更新:Jquery 1.6+ 有新的 prop 方法取代了 attr,例如:
$(objectElement).prop('checked');
评论
.attr
.prop
以下是使用按钮选中和取消选中的代码:
var set=1;
var unset=0;
jQuery( function() {
$( '.checkAll' ).live('click', function() {
$( '.cb-element' ).each(function () {
if(set==1){ $( '.cb-element' ).attr('checked', true) unset=0; }
if(set==0){ $( '.cb-element' ).attr('checked', false); unset=1; }
});
set=unset;
});
});
更新:这是使用较新的 Jquery 1.6+ prop 方法的相同代码块,它取代了 attr:
var set=1;
var unset=0;
jQuery( function() {
$( '.checkAll' ).live('click', function() {
$( '.cb-element' ).each(function () {
if(set==1){ $( '.cb-element' ).prop('checked', true) unset=0; }
if(set==0){ $( '.cb-element' ).prop('checked', false); unset=1; }
});
set=unset;
});
});
评论
.attr
.prop
我无法使用以下命令让它工作:
$("#cb").prop('checked', 'true');
$("#cb").prop('checked', 'false');
true 和 false 都会选中该复选框。对我有用的是:
$("#cb").prop('checked', 'true'); // For checking
$("#cb").prop('checked', ''); // For unchecking
评论
true
false
'true'
'false'
'false'
true
false
假设问题是......
如何选中按值设置的复选框?
请记住,在典型的复选框集中,所有输入标记都具有相同的名称,但它们的属性值
不同:该集的每个输入都没有 ID。
Xian 的答案可以使用更具体的选择器进行扩展,使用以下代码行:
$("input.myclass[name='myname'][value='the_value']").prop("checked", true);
如果您使用 PhoneGap 进行应用程序开发,并且按钮上有一个要立即显示的值,请记住执行此操作
$('span.ui-[controlname]',$('[id]')).text("the value");
我发现没有跨度,无论你做什么,界面都不会更新。
我错过了解决方案。我将始终使用:
if ($('#myCheckBox:checked').val() !== undefined)
{
//Checked
}
else
{
//Not checked
}
评论
.val()
undefined
.length
试试这个:
$('#checkboxid').get(0).checked = true; //For checking
$('#checkboxid').get(0).checked = false; //For unchecking
这是一种无需jQuery即可完成的方法
function addOrAttachListener(el, type, listener, useCapture) {
if (el.addEventListener) {
el.addEventListener(type, listener, useCapture);
} else if (el.attachEvent) {
el.attachEvent("on" + type, listener);
}
};
addOrAttachListener(window, "load", function() {
var cbElem = document.getElementById("cb");
var rcbElem = document.getElementById("rcb");
addOrAttachListener(cbElem, "click", function() {
rcbElem.checked = cbElem.checked;
}, false);
}, false);
<label>Click Me!
<input id="cb" type="checkbox" />
</label>
<label>Reflection:
<input id="rcb" type="checkbox" />
</label>
如果使用移动设备,并且您希望界面更新并将复选框显示为未选中,请使用以下命令:
$("#checkbox1").prop('checked', false).checkboxradio("refresh");
这是使用jQuery的完整答案
我测试了它,它 100% :D
// when the button (select_unit_button) is clicked it returns all the checed checkboxes values
$("#select_unit_button").on("click", function(e){
var arr = [];
$(':checkbox:checked').each(function(i){
arr[i] = $(this).val(); // u can get id or anything else
});
//console.log(arr); // u can test it using this in google chrome
});
要使用 jQuery 1.6 或更高版本选中复选框,只需执行以下操作:
checkbox.prop('checked', true);
要取消选中,请使用:
checkbox.prop('checked', false);
这是我喜欢使用jQuery切换复选框的方法:
checkbox.prop('checked', !checkbox.prop('checked'));
如果您使用的是 jQuery 1.5 或更低版本:
checkbox.attr('checked', true);
要取消选中,请使用:
checkbox.attr('checked', false);
$(".myCheckBox").prop("checked","checked");
评论
.attr
.prop
请注意 Internet Explorer 9 之前的 Internet Explorer 中的内存泄漏,如 jQuery 文档所述:
在版本 9 之前的 Internet Explorer 中,使用 .prop() 设置 DOM element 属性设置为除简单基元值以外的任何内容 (number、string 或 boolean) 如果属性为 在删除 DOM 元素之前未删除(使用 .removeProp()) 从文档。在没有内存的情况下安全地设置DOM对象的值 泄漏,请使用 .data()。
评论
.prop('checked',true)
在jQuery中,
if($("#checkboxId").is(':checked')){
alert("Checked");
}
或
if($("#checkboxId").attr('checked')==true){
alert("Checked");
}
在 JavaScript 中,
if (document.getElementById("checkboxID").checked){
alert("Checked");
}
评论
.attr
.prop
$('controlCheckBox').click(function(){
var temp = $(this).prop('checked');
$('controlledCheckBoxes').prop('checked', temp);
});
评论
以下是如何选中多个复选框的代码和演示...
http://jsfiddle.net/tamilmani/z8TTt/
$("#check").on("click", function () {
var chk = document.getElementById('check').checked;
var arr = document.getElementsByTagName("input");
if (chk) {
for (var i in arr) {
if (arr[i].name == 'check') arr[i].checked = true;
}
} else {
for (var i in arr) {
if (arr[i].name == 'check') arr[i].checked = false;
}
}
});
评论
$("#check")
document.getElementsByTagName("input")
for
.prop()
对于整体:
$("#checkAll").click(function(){
$(".somecheckBoxes").prop('checked',$(this).prop('checked')?true:false);
});
纯 JavaScript 非常简单,开销也小得多:
var elements = document.getElementsByClassName('myCheckBox');
for(var i = 0; i < elements.length; i++)
{
elements[i].checked = true;
}
评论
另一个可能的解决方案:
var c = $("#checkboxid");
if (c.is(":checked")) {
$('#checkboxid').prop('checked', false);
} else {
$('#checkboxid').prop('checked', true);
}
选中和取消选中
$('.myCheckbox').prop('checked', true);
$('.myCheckbox').prop('checked', false);
评论
你可以试试这个:
$('input[name="activity[task_state]"]').val("specify the value you want to check ")
这可能是最短和最简单的解决方案:
$(".myCheckBox")[0].checked = true;
或
$(".myCheckBox")[0].checked = false;
更短的是:
$(".myCheckBox")[0].checked = !0;
$(".myCheckBox")[0].checked = !1;
这里也是一个 jsFiddle。
如果您使用 ASP.NET MVC,生成许多复选框,然后必须使用 JavaScript 选择/取消选择所有复选框,您可以执行以下操作。
[HTML全文]
@foreach (var item in Model)
{
@Html.CheckBox(string.Format("ProductId_{0}", @item.Id), @item.IsSelected)
}
JavaScript的
function SelectAll() {
$('input[id^="ProductId_"]').each(function () {
$(this).prop('checked', true);
});
}
function UnselectAll() {
$('input[id^="ProductId_"]').each(function () {
$(this).prop('checked', false);
});
}
评论
当您选中复选框时,例如;
$('.className').attr('checked', 'checked')
这可能还不够。您还应该调用以下函数;
$('.className').prop('checked', 'true')
尤其是当您删除了复选框 checked 属性时。
对于 jQuery 1.6+
$('.myCheckbox').prop('checked', true);
$('.myCheckbox').prop('checked', false);
对于 jQuery 1.5.x 及更低版本
$('.myCheckbox').attr('checked', true);
$('.myCheckbox').attr('checked', false);
要检查,
$('.myCheckbox').removeAttr('checked');
正如@livefree75所说:
jQuery 1.5.x 及更低版本
您还可以使用新方法扩展 $.fn 对象:
(function($) {
$.fn.extend({
check : function() {
return this.filter(":radio, :checkbox").attr("checked", true);
},
uncheck : function() {
return this.filter(":radio, :checkbox").removeAttr("checked");
}
});
}(jQuery));
但是在新版本的 jQuery 中,我们必须使用这样的东西:
j查询 1.6+
(function($) {
$.fn.extend({
check : function() {
return this.filter(":radio, :checkbox").prop("checked", true);
},
uncheck : function() {
return this.filter(":radio, :checkbox").prop("checked",false);
}
});
}(jQuery));
然后你可以做:
$(":checkbox").check();
$(":checkbox").uncheck();
这可能会对某人有所帮助。
HTML5的
<input id="check_box" type="checkbox" onclick="handleOnClick()">
JavaScript的。
function handleOnClick(){
if($("#check_box").prop('checked'))
{
console.log("current state: checked");
}
else
{
console.log("current state: unchecked");
}
}
如果您碰巧正在使用 Bootstrap(也许在不知不觉中)......
$('#myCheckbox').bootstrapToggle('on')
$('#myCheckbox').bootstrapToggle('off')
http://www.bootstraptoggle.com/
if($('jquery_selector').is(":checked")){
//somecode
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
评论
您可以通过不同的方式使用 JavaScript 选中复选框。您可以在下面看到。
第一种方法 -
$('.myCheckbox').prop('checked', true);
第二种方法 -
$('.myCheckbox').attr('checked', true);
第三种方法(用于检查复选框是否被选中的条件)-
$('.myCheckbox').is(':checked')
如果您正在使用并且没有更改复选框,则需要添加如下内容:.prop('checked', true|false)
trigger('click')
// Check
$('#checkboxF1').prop( "checked", true).trigger('click');
// Uncheck
$('#checkboxF1').prop( "checked", false).trigger('click');
评论
于2019年1月编辑
您可以使用: .prop( propertyName ) - 添加的版本: 1.6
p {margin: 20px 0 0;}
b {color: red;}
label {color: red;}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<input id="check1" type="checkbox" checked="checked">
<label for="check1">Check here</label>
<p></p>
<script>
$( "input" ).change(function() {
var $input = $( this );
$( "p" ).html(
"The .attr( \"checked\" ): <b>" + $input.attr( "checked" ) + "</b><br>" +
"The .prop( \"checked\" ): <b>" + $input.prop( "checked" ) + "</b><br>" +
"The .is( \":checked\" ): <b>" + $input.is( ":checked" ) + "</b>" );
}).change();
</script>
</body>
</html>
在 Angular 框架上
示例 1
在 .html 文件中
<input type="checkbox" (change)="toggleEditable($event)">
在 .ts 文件中
toggleEditable(event) {
if ( event.target.checked ) {
this.contentEditable = true;
}
}
示例 2
在 .html 文件中
<input type="checkbox" [(ngModel)]="isChecked" (change)="checkAction(isChecked ? 'Action1':'Action2')" />
JavaScript 解决方案也可以很简单,开销更少:
document.querySelectorAll('.myCheckBox').forEach(x=> x.checked=1)
document.querySelectorAll('.myCheckBox').forEach(x=> x.checked=1)
checked A: <input type="checkbox" class="myCheckBox"><br/>
unchecked: <input type="checkbox"><br/>
checked B: <input type="checkbox" class="myCheckBox"><br/>
评论
如果您有 id 来检查它,则可以执行此操作
document.getElementById('ElementId').checked = false
而这个取消选中
document.getElementById('ElementId').checked = true
评论
如果您考虑使用vanilla js而不是jquery,则有一个解决方案:
//for one element:
document.querySelector('.myCheckBox').checked = true /* or false */ //will select the first matched element
//for multiple elements:
for (const checkbox of document.querySelectorAll('.myCheckBox')) {
checkbox.checked = true //or false
}
我想知道为什么没有一个旧答案提到要完全模拟滴答声,如果你想在模拟滴答声后触发其他东西,你还需要模拟变化事件:
$('.myCheckbox').prop('checked', true).trigger("change");
$('.myCheckbox').prop('checked', false).trigger("change");
评论
$("#mycheckbox").click();