我想做这样的事情来checkbox
使用jQuery打勾:
$(".myCheckBox").checked(true);
要么
$(".myCheckBox").selected(true);
这样的事情存在吗?
$("#mycheckbox").click();
我想做这样的事情来checkbox
使用jQuery打勾:
$(".myCheckBox").checked(true);
要么
$(".myCheckBox").selected(true);
这样的事情存在吗?
$("#mycheckbox").click();
Answers:
用途.prop()
:
$('.myCheckbox').prop('checked', true);
$('.myCheckbox').prop('checked', false);
如果只使用一个元素,则始终可以访问底层元素HTMLInputElement
并修改其.checked
属性:
$('.myCheckbox')[0].checked = true;
$('.myCheckbox')[0].checked = false;
使用.prop()
and .attr()
方法代替此方法的好处是它们将对所有匹配的元素进行操作。
该.prop()
方法不可用,因此您需要使用.attr()
。
$('.myCheckbox').attr('checked', true);
$('.myCheckbox').attr('checked', false);
请注意,这是jQuery在1.6版之前的单元测试所使用的方法,并且比使用它更可取,$('.myCheckbox').removeAttr('checked');
因为如果最初选中该框,则后者将更改对.reset()
包含它的任何形式的调用的行为–细微但可能不受欢迎的行为改变。
有关更多信息,checked
可以在1.6版发行说明和文档的“ 属性与属性”部分中找到有关从1.5.x到1.6过渡时属性/属性处理更改的一些不完整讨论。.prop()
DOMElement.checked = true
。” 但这可以忽略不计,因为它只是一个要素……
$(element).prop('checked')
完全是在浪费打字。 element.checked
存在,应在已经拥有的情况下使用element
采用:
$(".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元素的“ 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
绝对是在元素上设置属性的适当方法。
你可以做
$('.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
不火更改事件。
您还可以使用新方法扩展$ .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
。
$("#mycheckbox")[0].checked = true;
$("#mycheckbox").attr('checked', true);
$("#mycheckbox").click();
最后一个事件将触发该复选框的click事件,其他事件则不会。因此,如果您要触发的复选框的onclick事件中包含自定义代码,请使用最后一个。
.attr
代替.prop
。
click
事件在Firefox和Edge中不可靠。
要选中一个复选框,您应该使用
$('.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)
我错过了解决方案。我将始终使用:
if ($('#myCheckBox:checked').val() !== undefined)
{
//Checked
}
else
{
//Not checked
}
.val()
总是会undefined
在检测到jQuery对象为空时返回,只需检查它即可.length
)- 有关更多可读方法,请参见stackoverflow.com/questions/901712/…。
要使用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>
这是使用按钮进行选中和取消选中的代码:
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
。
我们可以使用elementObject
jQuery来检查属性:
$(objectElement).attr('checked');
我们可以将其用于所有jQuery版本,而不会出现任何错误。
更新:Jquery 1.6+具有新的prop方法,该方法取代了attr,例如:
$(objectElement).prop('checked');
.attr
代替.prop
。
这是有关如何检查多个复选框的代码和演示...
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")
与原始DOM API调用混合使用document.getElementsByTagName("input")
似乎不太明智,尤其是考虑到for
可以通过使用来避免此处的循环.prop()
。无论如何,这是又一个迟来的答案,没有增加任何新内容。
另一个可能的解决方案:
var c = $("#checkboxid");
if (c.is(":checked")) {
$('#checkboxid').prop('checked', false);
} else {
$('#checkboxid').prop('checked', true);
}
正如@ 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();
请注意,Internet Explorer 9之前的Internet Explorer中的内存泄漏,因为jQuery文档指出:
在版本9之前的Internet Explorer中,如果不删除该属性(使用.removeProp( ))从文档中删除DOM元素之前。要在DOM对象上安全地设置值而不会导致内存泄漏,请使用.data()。
.prop('checked',true)
。
选中和取消选中
$('.myCheckbox').prop('checked', true);
$('.myCheckbox').prop('checked', false);
$('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。
我不能使用它来工作:
$("#cb").prop('checked', 'true');
$("#cb").prop('checked', 'false');
正确和错误都会选中该复选框。对我有用的是:
$("#cb").prop('checked', 'true'); // For checking
$("#cb").prop('checked', ''); // For unchecking
true
和false
,不'true'
和'false'
?
当您选中类似的复选框时;
$('.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
。