我想做这样的事情来勾选checkbox使用jQuery：
$(".myCheckBox").checked(true);
或者
$(".myCheckBox").selected(true);
这样的事情存在吗？
tpower
问问题
3610725 次
43 回答
6288
现代 jQuery
使用.prop()：
$('.myCheckbox').prop('checked', true);
$('.myCheckbox').prop('checked', false);
DOM API
如果您只使用一个元素，则始终可以访问底层HTMLInputElement并修改其.checked属性：
$('.myCheckbox')[0].checked = true;
$('.myCheckbox')[0].checked = false;
使用.prop()and.attr()方法代替它的好处是它们将对所有匹配的元素进行操作。
jQuery 1.5.x 及以下
该.prop()方法不可用，因此您需要使用.attr().
$('.myCheckbox').attr('checked', true);
$('.myCheckbox').attr('checked', false);
请注意，这是jQuery 1.6 版之前的单元测试使用的方法，并且比使用更可取，$('.myCheckbox').removeAttr('checked');因为如果最初选中该框，则后者将更改对.reset()包含它的任何表单的调用的行为 - 微妙但可能不受欢迎的行为改变。
有关更多上下文，有关从 1.5.x 到 1.6 的转换中属性/属性处理的更改的一些不完整讨论checked可以在版本 1.6 发行说明和文档的属性与属性部分中找到。.prop()
于 2009-01-08T22:25:08.447 回答
758
采用：
$(".myCheckbox").attr('checked', true); // Deprecated
$(".myCheckbox").prop('checked', true);
如果你想检查一个复选框是否被选中：
$('.myCheckbox').is(':checked');
于 2009-01-08T22:25:25.183 回答
337
这是使用 jQuery 选中和取消选中复选框的正确方法，因为它是跨平台标准，并且允许表单重新发布。
$('.myCheckBox').each(function(){ this.checked = true; });
$('.myCheckBox').each(function(){ this.checked = false; });
通过这样做，您将使用 JavaScript 标准来检查和取消选中复选框，因此任何正确实现复选框元素的“已选中”属性的浏览器都将完美地运行此代码。这应该是所有主流浏览器，但我无法在 Internet Explorer 9 之前进行测试。
问题（jQuery 1.6）：
一旦用户单击一个复选框，该复选框就会停止响应“选中”属性更改。
这是一个在有人单击复选框后复选框属性无法完成工作的示例（这发生在 Chrome 中）。
解决方案：
通过在DOM元素上使用 JavaScript 的“checked”属性，我们能够直接解决问题，而不是试图操纵 DOM 去做我们想要它做的事情。
此插件将更改 jQuery 选择的任何元素的选中属性，并在所有情况下成功选中和取消选中复选框。因此，虽然这可能看起来像是一个过分的解决方案，但它会让您的网站的用户体验更好，并有助于防止用户感到沮丧。
(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;
});
于 2011-05-06T19:31:21.063 回答
159
你可以做
$('.myCheckbox').attr('checked',true) //Standards compliant
或者
$("form #mycheckbox").attr('checked', true)
如果您在要触发的复选框的 onclick 事件中有自定义代码，请改用此代码：
$("#mycheckbox").click();
您可以通过完全删除该属性来取消选中：
$('.myCheckbox').removeAttr('checked')
您可以像这样检查所有复选框：
$(".myCheckbox").each(function(){
$("#mycheckbox").click()
});
于 2009-01-08T22:24:24.483 回答
84
您还可以使用新方法扩展 $.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()。
于 2010-08-20T18:19:03.963 回答
68
$("#mycheckbox")[0].checked = true;
$("#mycheckbox").attr('checked', true);
$("#mycheckbox").click();
最后一个将触发复选框的单击事件，其他则不会。因此，如果您在要触发的复选框的 onclick 事件中有自定义代码，请使用最后一个。
于 2009-01-08T22:36:14.897 回答
64
要检查一个复选框，您应该使用
$('.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');
}
});
于 2011-03-23T15:22:24.483 回答
54
这将选择具有指定属性且值包含给定子字符串“ckbItem”的元素：
$('input[name *= ckbItem]').prop('checked', true);
它将选择其名称属性中包含 ckbItem 的所有元素。
于 2010-09-20T11:43:08.620 回答
49
假设问题是...
如何按值检查复选框集？
请记住，在典型的复选框集中，所有输入标签都具有相同的名称，它们的不同之处在于属性value：集合的每个输入都没有 ID。
Xian 的答案可以通过更具体的选择器进行扩展，使用以下代码行：
$("input.myclass[name='myname'][value='the_value']").prop("checked", true);
于 2012-03-09T12:28:49.063 回答
47
我错过了解决方案。我会一直使用：
if ($('#myCheckBox:checked').val() !== undefined)
{
//Checked
}
else
{
//Not checked
}
于 2012-06-24T11:33:42.010 回答
43
要使用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);
于 2013-03-14T09:40:12.660 回答
38
这是一种不使用 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>于 2012-10-23T00:41:23.697 回答
32
这是使用按钮选中和取消选中的代码：
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;
});
});
于 2011-10-25T08:51:47.433 回答
31
试试这个：
$('#checkboxid').get(0).checked = true; //For checking
$('#checkboxid').get(0).checked = false; //For unchecking
于 2012-09-10T10:26:10.500 回答
30
我们可以使用elementObjectjQuery 来检查属性：
$(objectElement).attr('checked');
我们可以将它用于所有 jQuery 版本而不会出现任何错误。
更新：Jquery 1.6+ 具有替换 attr 的新 prop 方法，例如：
$(objectElement).prop('checked');
于 2011-06-24T08:27:21.133 回答
26
如果您正在使用PhoneGap进行应用程序开发，并且您在想要立即显示的按钮上有一个值，请记住这样做
$('span.ui-[controlname]',$('[id]')).text("the value");
我发现没有span，不管你做什么，界面都不会更新。
于 2012-04-17T06:34:33.313 回答
26
这是如何检查多个复选框的代码和演示...
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;
}
}
});
于 2013-08-16T06:17:37.977 回答
22
另一种可能的解决方案：
var c = $("#checkboxid");
if (c.is(":checked")) {
$('#checkboxid').prop('checked', false);
} else {
$('#checkboxid').prop('checked', true);
}
于 2013-10-12T08:23:42.580 回答
22
正如@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 中，我们必须使用这样的东西：
jQuery 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();
于 2016-09-23T18:43:14.200 回答
19
如果使用移动设备并且您希望界面更新并将复选框显示为未选中，请使用以下命令：
$("#checkbox1").prop('checked', false).checkboxradio("refresh");
于 2013-01-11T13:05:35.360 回答
19
对于 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');
于 2015-04-21T10:29:07.817 回答
18
请注意Internet Explorer 9之前的 Internet Explorer 中的内存泄漏，如jQuery 文档所述：
在版本 9 之前的 Internet Explorer 中，如果不删除该属性（使用 .removeProp( )) 在从文档中删除 DOM 元素之前。要安全地在 DOM 对象上设置值而不发生内存泄漏，请使用 .data()。
于 2013-05-22T07:25:31.423 回答
18
选中和取消选中
$('.myCheckbox').prop('checked', true);
$('.myCheckbox').prop('checked', false);
于 2013-11-14T06:34:53.620 回答
17
$('controlCheckBox').click(function(){
var temp = $(this).prop('checked');
$('controlledCheckBoxes').prop('checked', temp);
});
于 2013-07-16T02:10:52.093 回答
16
这可能是最短和最简单的解决方案：
$(".myCheckBox")[0].checked = true;
或者
$(".myCheckBox")[0].checked = false;
更短的是：
$(".myCheckBox")[0].checked = !0;
$(".myCheckBox")[0].checked = !1;
这里也是一个jsFiddle。
于 2014-05-27T15:11:43.787 回答
15
纯 JavaScript 非常简单，开销也少得多：
var elements = document.getElementsByClassName('myCheckBox');
for(var i = 0; i < elements.length; i++)
{
elements[i].checked = true;
}
于 2013-09-18T01:14:15.430 回答
14
我无法使用：
$("#cb").prop('checked', 'true');
$("#cb").prop('checked', 'false');
true 和 false 都会选中复选框。对我有用的是：
$("#cb").prop('checked', 'true'); // For checking
$("#cb").prop('checked', ''); // For unchecking
于 2012-01-05T13:26:52.107 回答
14
当您选中一个复选框时；
$('.className').attr('checked', 'checked')
这可能还不够。您还应该调用下面的函数；
$('.className').prop('checked', 'true')
特别是当您删除复选框选中属性时。
于 2015-03-05T13:10:51.583 回答
12
这是使用 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
});
于 2013-02-27T15:49:10.110 回答
11
在 jQuery 中，
if($("#checkboxId").is(':checked')){
alert("Checked");
}
或者
if($("#checkboxId").attr('checked')==true){
alert("Checked");
}
在 JavaScript 中，
if (document.getElementById("checkboxID").checked){
alert("Checked");
}
于 2013-06-10T13:17:51.853 回答
11
如果您使用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);
});
}
于 2014-07-08T18:22:56.527 回答
11
这可能会帮助某人。
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");
}
}
于 2016-09-29T13:55:54.237 回答
10
if($('jquery_selector').is(":checked")){
//somecode
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>于 2017-11-01T13:19:52.150 回答
9
如果您正在使用.prop('checked', true|false)并且没有更改复选框，则需要添加trigger('click')如下：
// Check
$('#checkboxF1').prop( "checked", true).trigger('click');
// Uncheck
$('#checkboxF1').prop( "checked", false).trigger('click');
于 2018-09-15T17:57:26.690 回答
8
$(".myCheckBox").prop("checked","checked");
于 2013-05-13T09:50:11.360 回答
6
你可以试试这个：
$('input[name="activity[task_state]"]').val("specify the value you want to check ")
于 2014-04-23T06:34:58.567 回答
6
如果你碰巧在使用Bootstrap（可能是不知情的）......
$('#myCheckbox').bootstrapToggle('on')
$('#myCheckbox').bootstrapToggle('off')
于 2017-03-14T20:32:38.217 回答
6
您可以使用 JavaScript 以不同方式检查复选框选中条件。你可以在下面看到。
第一种方法——
$('.myCheckbox').prop('checked', true);第二种方法——
$('.myCheckbox').attr('checked', true);第三种方法（检查复选框是否选中） -
$('.myCheckbox').is(':checked')
于 2017-12-01T07:08:53.107 回答
6
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')" />
于 2019-01-02T15:10:04.930 回答
1
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/>于 2019-12-27T21:53:06.800 回答
1
如果您有 id 来检查它，您可以这样做
document.getElementById('ElementId').checked = false
这要取消选中
document.getElementById('ElementId').checked = true
于 2020-12-04T12:15:43.907 回答
1
如果您考虑使用 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
}
于 2021-07-29T07:06:45.600 回答
-6
总体而言：
$("#checkAll").click(function(){
$(".somecheckBoxes").prop('checked',$(this).prop('checked')?true:false);
});
于 2013-09-13T06:37:02.743 回答