设置“已检查”用于jQuery的复选框?
-
06-07-2019 - |
题
我想做这样的事情,使用 jQuery 打勾复选框
:
$(".myCheckBox").checked(true);
或
$(".myCheckBox").selected(true);
这样的事情存在吗?
解决方案
jQuery 1.6 +
使用新的 .prop()
方法:
$('.myCheckbox').prop('checked', true);
$('.myCheckbox').prop('checked', false);
jQuery 1.5.x及以下
.prop()
方法不可用,因此您需要使用 .attr()代码>
。
$('.myCheckbox').attr('checked', true);
$('.myCheckbox').attr('checked', false);
请注意,这是使用的方法jQuery在版本1.6之前的单元测试并且优于使用
$('.myCheckbox').removeAttr('checked');
因为后者将在最初检查该框时,将调用的行为更改为 .reset()
- 一个微妙但可能不受欢迎的行为更改。
有关更多上下文,可以在 checked 属性/属性处理更改的一些不完整的讨论: //blog.jquery.com/2011/05/03/jquery-16-released/“rel =”noreferrer“>版本1.6发行说明和属性与属性部分 .prop()
文档。
任何版本的jQuery
如果您只使用一个元素,则可以随时修改 HTMLInputElement
的 .checked
属性:
$('.myCheckbox')[0].checked = true;
$('.myCheckbox')[0].checked = false;
使用 .prop()
和 .attr()
方法而不是这样做的好处是它们可以对所有匹配的元素进行操作。
其他提示
使用:
$(".myCheckbox").attr('checked', true); // Deprecated
$(".myCheckbox").prop('checked', true);
如果您想检查是否选中了复选框:
$('.myCheckbox').is(':checked');
这是使用jQuery检查和取消选中复选框的正确方法,因为它是跨平台标准,将允许表单重新发布。
$('.myCheckBox').each(function(){ this.checked = true; });
$('.myCheckBox').each(function(){ this.checked = false; });
通过这样做,您使用JavaScript标准来检查和取消选中复选框,因此任何正确实现“已检查”的浏览器都可以checkbox元素的属性将完美地运行此代码。这个应该是所有主要的浏览器,但我无法测试之前的Internet  Explorer  9。
问题(jQuery 1.6):
用户点击复选框后,该复选框停止响应“已检查”复选框。属性变化。
以下是某人在点击了复选框后无法完成工作的复选框属性示例(这种情况发生在Chrome中)。
解决方案:
使用JavaScript的“已检查”在 DOM 元素上,我们能够直接解决问题,而不是试图操纵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;
});
你可以做到
$('.myCheckbox').attr('checked',true) //Standards compliant
或
$("form #mycheckbox").attr('checked', true)
如果你想要触发的复选框的onclick事件中有自定义代码,请改为使用此代码:
$("#mycheckbox").click();
您可以通过完全删除该属性取消选中:
$('.myCheckbox').removeAttr('checked')
您可以选中以下所有复选框:
$(".myCheckbox").each(function(){
$("#mycheckbox").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()。
$("#mycheckbox")[0].checked = true;
$("#mycheckbox").attr('checked', true);
$("#mycheckbox").click();
最后一个会触发复选框的click事件,其他人则不会。 因此,如果您要触发的复选框的onclick事件中有自定义代码,请使用最后一个。
要选中复选框,您应该使用
$('.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');
}
});
这将选择具有指定属性的元素,其值包含给定的子字符串“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
}
要使用 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 id="cb" type="checkbox" />
</label>
<label>Reflection:
<input id="rcb" 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;
});
});
我们可以使用 elementObject
和jQuery来检查属性:
$(objectElement).attr('checked');
我们可以将它用于所有jQuery版本而不会出现任何错误。
更新:Jquery 1.6+有一个新的prop方法取代了attr,例如:
$(objectElement).prop('checked');
如果您正在使用 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&nbsp; 9 之前,请注意Internet Explorer中的内存泄漏情况,如 jQuery文档说明:
在版本9之前的Internet Explorer中,使用.prop()设置DOM element属性除了简单的原始值以外的任何值 (number,string或boolean)如果属性是,则可能导致内存泄漏 在删除DOM元素之前不删除(使用.removeProp()) 从文件。在没有内存的情况下安全地设置DOM对象的值 泄漏,使用.data()。
对于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');
检查和取消选中
$('.myCheckbox').prop('checked', true);
$('.myCheckbox').prop('checked', false);
正如@ 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();
$('controlCheckBox').click(function(){
var temp = $(this).prop('checked');
$('controlledCheckBoxes').prop('checked', temp);
});
这可能是最短且最简单的解决方案:
$(".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
当您勾选一个复选框时,
$('.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");
}