使用jQuery为复选框设置”选中”？

啊Q • 2023年2月27日 pm2:21 • Javascript, 问答 • 1154 阅读

我想做这样的事情来勾选checkbox使用jQuery:

$(".myCheckBox").checked(true);

要么

$(".myCheckBox").selected(true);

这样的事情存在吗？

回答

jQuery 1.6+

使用新.prop()方法:

$('.myCheckbox').prop('checked', true);
$('.myCheckbox').prop('checked', false);

$('.myCheckbox').prop('checked', true);
$('.myCheckbox').prop('checked', false);

$('.myCheckbox').prop('checked', true);
$('.myCheckbox').prop('checked', false);

$('.myCheckbox').prop('checked', true);
$('.myCheckbox').prop('checked', false);

jQuery 1.5.x及以下版本

该HTMLInputElement方法不可用,因此您需要使用$('.myCheckbox').attr('checked', true); $('.myCheckbox').attr('checked', false);

ode>.checked.

$('.myCheckbox')[0].checked = true;
$('.myCheckbox')[0].checked = false;

请注意,这是jQuery在1.6版之前的单元测试所使用的方法,并且优于使用

$('.myCheckbox').attr('checked', true);
$('.myCheckbox').attr('checked', false);

因为后者将在最初检查框的情况下,将调用的行为更改为.prop()包含它的任何形式 - 一个微妙但可能不受欢迎的行为更改.

有关更多上下文,.attr()可以在版本1.6发行说明和文档的属性与属性部分中找到有关从1.5.x过渡到1.6 的属性/属性处理更改的一些不完整的讨论..prop()

任何版本的jQuery

如果你只有一个元素的工作,你总是可以只修改.attr()的$('.myCheckbox').removeAttr('checked');属性:

使用.reset()和checked方法而不是使用它的好处是它们将对所有匹配的元素进行操作.

正如泰勒所说,性能改善可以忽略不计.对我来说,使用通用API进行编码使其比混合本机API和jQuery API更具可读性.我坚持使用jQuery.
@Xian删除checked属性使得无法重置表单
"如果你只使用一个元素,那么使用`DOMElement.checked = true`将始终是最快的".但它可以忽略不计,因为它只是一个元素......
@TylerCrompton - 当然,它并不完全是关于性能,但做`$(element).prop('checked')`完全是在浪费打字.`element.checked`存在,应该在你已经有`element`的情况下使用
作为旁注,jQuery 1.6.1应该修复我提到的问题,所以我们可以继续使用$(...).prop(...)
别忘了把#放在id的前面.
在jQuery 1.9中你必须使用prop('checked',bool),因为行为的变化:http://jquery.com/upgrade-guide/1.9/
`$('.myCheckbox').removeAttr('checked');`用户单击复选框后将无效.相反,请参阅我的答案http://stackoverflow.com/a/5916151/696056
更改值忽略了我设置的`.change(...)`处理程序,我刚刚添加:`$(this).attr('checked',!this.checked).change()`

使用:

$(".myCheckbox").attr('checked', true); // Deprecated
$(".myCheckbox").prop('checked', true);

如果您想检查是否选中了复选框:

$('.myCheckbox').is(':checked');

我尝试了这个确切的代码,如果选择all/select none复选框需要检查和取消选中所有以及检查其状态,它对我不起作用.相反,我尝试了@Christopher Harris的答案,这就是诀窍.
$(选择器).checked不起作用.jQuery中没有'checked'方法.
还检查了$(selector).checked to check

这是检查和使用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;
});

在你的第一个JSFiddle示例中,你应该使用`removeAttr('checked')`而不是`attr('checked',false)`
@DanielXMoore,你正在绕过这个问题.该示例显示,一旦用户单击了复选框,浏览器就不再响应`checked`属性更改,*无论*用于更改它们的方法.
@ChristopherHarris好的,你是对的,我错过了.从jQuery 1.6开始,你不应该使用.prop方法吗？`$('.myCheckBox').prop('checked',true)`这样它会自动应用于整个匹配元素集(仅在设置时)虽然,获取仍然只是第一次)

你可以做

$('.myCheckbox').attr('checked',true) //Standards compliant

要么

$("form #mycheckbox").attr('checked', true)

如果您要在触发的复选框的onclick事件中有自定义代码,请使用以下代码:

$("#mycheckbox").click();

您可以通过完全删除该属性取消选中:

$('.myCheckbox').removeAttr('checked')

您可以选中所有复选框,如下所示:

$(".myCheckbox").each(function(){
$("#mycheckbox").click()
});

这个答案是过

(function($)  {
$.fn.extend({
check : function()  {
return this.filter(":radio, :checkbox").attr("checked", true);
},
uncheck : function()  {
return this.filter(":radio, :checkbox").removeAttr("checked");
}
});
}(jQuery));

时的,因为它使用`.attr`而不是`.prop`.

@Michah删除checked属性使得无法重置表单

您还可以使用新方法扩展$ .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().

@ livfree75删除checked属性使得无法重置表单
这个答案是过时的,因为它使用`.attr`而不是`.prop`.

$("#mycheckbox")[0].checked = true;
$("#mycheckbox").attr('checked', true);
$("#mycheckbox").click();

最后一个将触发复选框的click事件,其他人不会.因此,如果您要在触发的复选框的onclick事件中有自定义代码,请使用最后一个.

这个答案是过时的,因为它使用`.attr`而不是`.prop`.
top one将失败... checked不是jquery对象成员

要选中您应该使用的复选框

 $('.myCheckbox').attr('checked',true);

要么

 $('.myCheckbox').attr('checked','checked');

要取消选中复选框,您应始终将其设置为false:

 $('.myCheckbox').attr('checked',false);

如果你这样做

  $('.myCheckbox').removeAttr('checked')

它会一起删除属性,因此您将无法重置表单.

BAD DEMO 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');
}
});

@MarkAmery你提到我的帖子在发布时没有添加任何内容,但这是准确的.如果您查看已接受答案的历史记录,您会发现他们建议删除该元素.这使得无法重置表单,这就是我开始发布的原因.

这将选择具有指定属性的元素,其值包含给定的子字符串"ckbItem":

$('input[name *= ckbItem]').prop('checked', true);

它将在其name属性中选择包含ckbItem的所有元素.

假设问题是......

如何选中复选框设置BY VALUE？

请记住,在典型的复选框集中,所有输入标记都具有相同的名称,它们因属性而不同value:集合的每个输入都没有ID.

使用以下代码行可以使用更具体的选择器扩展Xian的答案:

$("input.myclass[name='myname'][value='the_value']").prop("checked", true);

我错过了解决方案.我将永远使用:

if ($('#myCheckBox:checked').val() !== undefined)
{
//Checked
}
else
{
//Not checked
}

这不回答问题(问题是关于*设置*是否选中了复选框,而不是确定是否选中了复选框).这也是一种非常丑陋的方法来确定复选框是否被选中(首先,你正在利用非自明的事实,`.()将在0元素上调用时始终返回`undefined`来检测一个jQuery对象是空的,当你可以简单地检查它的`.length`时 - 请参阅http://stackoverflow.com/questions/901712/check-checkbox-checked-property-using-jquery以获得更易读的方法.

要使用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);

这是一种没有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 type="checkbox" />
</label>
<label>Reflection:
<input type="checkbox" />
</label>

试试这个:

$('#checkboxid').get(0).checked = true;  //For checking
$('#checkboxid').get(0).checked = false; //For unchecking

以下是使用按钮选中和取消选中的代码:

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`.

我们可以使用elementObjectjQuery来检查属性:

$(objectElement).attr('checked');

我们可以将它用于所有jQuery版本而不会出现任何错误.

更新:Jquery 1.6+具有替换attr的新prop方法,例如:

$(objectElement).prop('checked');

这个答案是过时的,因为它使用`.attr`而不是`.prop`.

如果您正在使用PhoneGap进行应用程序开发,并且您想要立即显示的按钮值,请记住这样做

$('span.ui-[controlname]',$('[id]')).text("the value");

我发现没有跨度,无论你做什么,界面都不会更新.

以下是如何检查多个复选框的代码和演示...

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;
}
}
});

另一种可能的方案

    var c = $("#checkboxid");
if (c.is(":checked")) {
$('#checkboxid').prop('checked', false);
} else {
$('#checkboxid').prop('checked', true);
}

如果使用移动设备并且您希望更新界面并将复选框显示为未选中,请使用以下命令:

$("#checkbox1").prop('checked', false).checkboxradio("refresh");

请注意Internet Explorer 9之前的Internet Explorer中的内存泄漏,因为jQuery文档指出:

这是无关紧要的,因为所有(正确的)答案都使用`.prop('checked',true)`.
在这种情况下没有内存泄漏,因为我们*将它设置为一个简单的原始值(布尔值).

对于jQuery 1.6+

对于jQuery 1.5.x及更低版本

去检查,

$('.myCheckbox').removeAttr('checked');

正如@ livefree75所说:

jQuery 1.5.x及以下版本

您还可以使用新方法扩展$ .fn对象:

但是在新版本的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();

要检查和取消选中

- 1; 这对已经膨胀的线程没有任何价值.这里的代码与接受的答案完全相同.

$('controlCheckBox').click(function(){
var temp = $(this).prop('checked');
$('controlledCheckBoxes').prop('checked', temp);
});

- 1代表仅代码答案,不直接回答问题,并且没有添加其他答案尚未涵盖的内容.

这可能是最简单,最简单的解决方案:

$(".myCheckBox")[0].checked = true;

要么

$(".myCheckBox")[0].checked = false;

更短的是:

$(".myCheckBox")[0].checked = !0;
$(".myCheckBox")[0].checked = !1;

这里也是一个jsFiddle.

简单的JavaScript非常简单,开销也少得多:

var elements = document.getElementsByClassName('myCheckBox');
for(var i = 0; i < elements.length; i++)
{
elements[i].checked = true;
}

这里的例子

我无法使用它:

$("#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`,因此它"工作".请参阅[这个小提琴](http://jsfiddle.net/rDt2P/),例如我的意思.

当您选中复选框时;

$('.className').attr('checked', 'checked')

这可能还不够.你也应该调用下面的函数;

$('.className').prop('checked', 'true')

特别是当您删除复选框选中的属性时.

这是
使用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中,

if($("#checkboxId").is(':checked')){
alert("Checked");
}

要么

if($("#checkboxId").attr('checked')==true){
alert("Checked");
}

在JavaScript中,

if (document.getElementById("checkboxID").checked){
alert("Checked");
}

这不回答这个问题.
这个答案是过时的,因为它使用`.attr`而不是`.prop`.

如果您使用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);
});
}

这可能对某人有帮助.

HTML5

 <input type="checkbox" onclick="handleOnClick()">

JavaScript的.

  function handleOnClick(){
if($("#check_box").prop('checked'))
{
console.log("current state: checked");
}
else
{
console.log("current state: unchecked");
}
}

如果您正在使用.prop('checked', true|false)并且没有更改checkbox，则需要trigger('click')像这样添加：

// Check
$('#checkboxF1').prop( "checked", true).trigger('click');
// Uncheck
$('#checkboxF1').prop( "checked", false).trigger('click');

如果您碰巧正在使用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>

在给出答案时，最好给出[关于您的答案的一些解释]（http://stackoverflow.com/help/how-to-answer）。

您可以使用 JavaScript 以不同的方式检查复选框选中的条件。你可以在下面看到。

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 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')" />

$(".myCheckBox").prop("checked","checked");

这个答案是过时的，因为它使用了.attr而不是.prop。

你可以试试这个:

$('input[name="activity[task_state]"]').val("specify the value you want to check ")

以上是使用jQuery为复选框设置”选中”？的全部内容。

THE END

checkbox checked jquery selected

二维码

为什么Java的+ =, – =,*=,/ =复合赋值运算符需要转换？

< <上一篇

用c#开发微信 (10) JS-SDK 基本用法- 分享接口“发送到朋友”

下一篇>>

搜索内容