我想用**jQuery做这样的事情来勾选一个 "检查框"。
$(".myCheckBox").checked(true);
或
$(".myCheckBox").selected(true);
这样的事情存在吗?
使用.prop()
。
$('.myCheckbox').prop('checked', true);
$('.myCheckbox').prop('checked', false);
如果你只处理一个元素,你可以直接访问底层的HTMLInputElement
并修改其.checked
属性。
$('.myCheckbox')[0].checked = true;
$('.myCheckbox')[0].checked = false;
使用.prop()
和.attr()
方法而不是这样做的好处是,它们将对所有匹配的元素进行操作。
.prop()
方法不可用,所以你需要使用.attr()
。
$('.myCheckbox').attr('checked', true);
$('.myCheckbox').attr('checked', false);
请注意,这是jQuery1.6版本之前的单元测试所使用的方法,比使用$('.myCheckbox').removeAttr('checked');
更可取,因为后者会,如果盒子最初被选中,改变任何包含它的表单上调用.reset()
的行为 - 一个微妙但可能不受欢迎的行为变化。
关于更多的背景,在从1.5.x到1.6的过渡中对处理 "checked "属性/property的变化的一些不完整的讨论可以在1.6版发布说明和.prop()
文档中的属性与属性部分找到。
这是用jQuery检查和取消检查复选框的正确方法,因为它是跨平台的标准,并且*允许表单回帖。
$('.myCheckBox').each(function(){ this.checked = true; });
$('.myCheckBox').each(function(){ this.checked = false; });
通过这样做,您使用JavaScript标准来检查和取消检查复选框,因此任何正确实现复选框的"checked".属性的浏览器都将完美地运行这段代码。 属性的浏览器都能完美地运行这段代码。 这*应该是所有主流的浏览器,但我无法测试之前的Internet Explorer 9。
问题(jQuery 1.6)。
一旦用户点击一个复选框,该复选框就会停止响应"checked" 属性的变化。
下面是一个例子,在有人*点击了复选框后,复选框属性无法完成工作(这在Chrome浏览器中发生)。
[Fiddle][1]。
解决方案:
通过在[DOM][2]元素上使用JavaScript的"checked" 属性,我们能够直接解决问题,而不是试图操纵DOM做我们*希望它做的事情。
[Fiddle][3]。
这款插件将改变任何元素被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;
});
[1]:
[2]: http://en.wikipedia.org/wiki/Document_Object_Model [3]: http://jsfiddle.net/xixonia/WnbNC/你可以做
$('.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').attr('checked',true);
或
$('.myCheckbox').attr('checked','checked');
而如果要取消选中一个复选框,您应该始终将其设置为假。
$('.myCheckbox').attr('checked',false);
如果你这样做
$('.myCheckbox').removeAttr('checked')
它将属性全部删除,因此你将无法重置表单。
[BAD DEMO jQuery 1.6][1]. 我认为这是坏的。 对于1.6,我将做一个新的帖子。
新的工作演示jQuery 1.5.2][2]在Chrome中可以使用。
两个演示都使用
$('#tc').click(function() {
if ( $('#myCheckbox').attr('checked')) {
$('#myCheckbox').attr('checked', false);
} else {
$('#myCheckbox').attr('checked', 'checked');
}
});
[1]:
[2]: http://jsfiddle.net/mcgrailm/24FLg/选择具有指定属性的元素,其值包含给定子串"ckbItem"。
$('input[name *= ckbItem]').prop('checked', true);
它将选择所有名称属性中包含ckbItem的元素。
要使用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的方法
<!--开始片段。 js hide.false --> -- begin snippet: js hide: false -->
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;
});
});
我们可以使用jQuery的 "elementObject "来获取属性检查。
$(objectElement).attr('checked');
我们可以在所有的jQuery版本中使用,而不会出现任何错误。
更新:Jquery 1.6+有了新的prop方法,它取代了attr,例如 Jquery 1.6+有一个新的prop方法,它取代了attr,例如:{{5477130}}}。
$(objectElement).prop('checked');
如果你正在使用[PhoneGap][1]进行应用开发,并且你的按钮上有一个你想即时显示的值,记得这样做。
$('span.ui-[controlname]',$('[id]')).text("the value");
我发现,如果没有跨度,无论你做什么,界面都不会更新。
以下是如何选中多个复选框的代码和演示...。
*
$("#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;
}
}
});
要注意Internet 资源管理器在[Internet 资源管理器 9][1]之前的内存泄漏,就像[jQuery文档所说的][2]。
在Internet Explorer第9版之前,使用.prop()来设置一个DOM
元素属性改为简单的基元值以外的任何其他属性。
(number, string, or boolean),如果属性为
在DOM元素被移除之前,不被移除(使用.removeProp())。
从文档中获取。 为了安全地在没有内存的DOM对象上设置值
泄漏,使用.data()。
[1]: http://en.wikipedia.org/wiki/Internet_Explorer_9 [2]: http://api.jquery.com/prop/