设置“检查”的checkbox与jQuery？

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

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

要么

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

这样的事情是否存在？

Answer 1

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版以前的unit testing中使用的方法，并且比使用更适合

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

因为后者将在最初检查盒子的情况下，改变对包含它的任何forms的.reset()调用的行为 – 一个微妙但可能不受欢迎的行为改变。

有关更多的上下文，可以在版本1.6发行说明和.prop()的属性与属性部分find对从1.5.x到1.6的转换中对已checked属性/属性的处理更改的不完整讨论。 文档 。

任何版本的jQuery

如果您只使用一个元素，则可以随时修改HTMLInputElement的.checked属性：

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

使用.prop()和.attr()方法代替这一点的好处是，它们将对所有匹配的元素进行操作。

Answer 2

使用：

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

如果你想检查checkbox是否被选中：

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

Answer 3

这是使用jQuery检查和取消选中checkbox的正确方法，因为它是跨平台的标准，并允许表单转发。

 $('.myCheckBox').each(function(){ this.checked = true; }); $('.myCheckBox').each(function(){ this.checked = false; }); 

通过这样做，您正在使用JavaScript标准来检查和取消选中checkbox，所以任何正确实现checkbox元素的“checked”属性的浏览器都将完美地运行此代码。 这应该是所有主stream浏览器，但是我无法testingInternet Explorer 9之前的版本。

问题 （jQuery 1.6）：

一旦用户点击checkbox，该checkbox会停止响应“已检查”属性更改。

这是checkbox属性在某人点击checkbox（这发生在Chrome中）后无法执行作业的示例。

小提琴

解决scheme：

通过在DOM元素上使用JavaScript的“checked”属性，我们能够直接解决问题，而不是试图操纵DOM去做我们想做的事情。

小提琴

这个插件会改变jQuery所选元素的checked属性，并在任何情况下成功地检查和取消选中checkbox。 所以，虽然这可能看起来像一个超负荷的解决scheme，它会使您的网站的用户体验更好，并帮助防止用户感到沮丧。

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

Answer 4

你可以做

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

要么

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

如果您在要触发的checkbox的onclick事件中有自定义代码，请使用下面的代码：

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

您可以通过完全删除属性来取消选中：

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

你可以像这样选中所有checkbox：

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

Answer 5

您还可以使用新的方法扩展$ .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（）。

Answer 6

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

最后一个将触发checkbox的点击事件，其他人不会。 因此，如果您在要触发的checkbox的onclick事件中使用自定义代码，请使用最后一个。

Answer 7

要检查一个checkbox，你应该使用

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

要么

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

并取消选中checkbox，应始终将其设置为false：

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

如果你这样做

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

它将所有属性一起删除，因此您将无法重置表单。

BAD DEMO jQuery 1.6 。 我认为这是打破了。 对于1.6，我打算就此发一个新post。

新的工作示例jQuery 1.5.2在Chrome中可用。

这两个演示使用

 $('#tc').click(function() { if ( $('#myCheckbox').attr('checked')) { $('#myCheckbox').attr('checked', false); } else { $('#myCheckbox').attr('checked', 'checked'); } }); 

Answer 8

假设问题是…

我如何检查checkbox设置值？

请记住，在一个典型的checkbox集合中，所有input标签具有相同的名称， 它们的属性value不同 ：集合的每个input都没有ID。

西安的答案可以用一个更具体的select ，使用下面的代码行来扩展：

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

Answer 9

我错过了解决scheme。 我会一直使用：

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

Answer 10

这将select具有包含给定子string的值的指定属性的元素：

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

它将select在其name属性中包含ckbItem的所有元素。

Answer 11

这是一个没有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> 

Answer 12

要使用jQuery 1.6或更高版本来检查checkbox，只需执行以下操作：

 checkbox.prop('checked', true); 

要取消选中，请使用：

 checkbox.prop('checked', false); 

这里是我喜欢使用jQuery切换checkbox：

 checkbox.prop('checked', !checkbox.prop('checked')); 

---

如果您使用的是jQuery 1.5或更低版本：

 checkbox.attr('checked', true); 

要取消选中，请使用：

 checkbox.attr('checked', false); 

Answer 13

尝试这个：

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

Answer 14

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

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

我发现没有跨度，不pipe你做什么，界面都不会更新。

Answer 15

这是用一个button检查和取消选中的代码：

 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+道具方法，它取代了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; }); }); 

Answer 16

我们可以在jQuery中使用elementObject来获取属性：

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

我们可以在没有任何错误的情况下为所有jQuery版本使用它。

更新：Jquery 1.6+具有替代attr的新的prop方法，例如：

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

Answer 17

这里是如何检查多个checkbox的代码和演示…

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

Answer 18

另一个可能的解

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

Answer 19

如果使用移动设备，并且希望界面更新并显示checkbox为未选中状态，请使用以下命令：

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

Answer 20

检查并取消选中

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

Answer 21

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

在版本9之前的Internet Explorer中，使用.prop（）将DOM元素属性设置为除简单基本值（数字，string或布尔值）以外的任何内容都可能导致内存泄漏（如果该属性未被删除（使用.removeProp ））之前DOM元素被从文档中删除。 要安全地设置没有内存泄漏的DOM对象的值，请使用.data（）。

Answer 22

对于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'); 

Answer 23

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

Answer 24

这可能是最简单和最简单的解决scheme：

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

要么

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

---

更短的将是：

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

---

这也是一个jsFiddle 。

Answer 25

普通的JavaScript非常简单，开销也小得多：

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

这里的例子

Answer 26

我无法使用它的工作：

 $("#cb").prop('checked', 'true'); $("#cb").prop('checked', 'false'); 

true和false都会检查checkbox。 对我有效的是：

 $("#cb").prop('checked', 'true'); // For checking $("#cb").prop('checked', ''); // For unchecking 

Answer 27

当你选中一个checkbox时

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

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

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

特别是当你删除checkbox选中属性。

Answer 28

这里是使用jQuery 的完整答案

我testing它，它工作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 }); 

Answer 29

在jQuery中，

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

要么

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

在JavaScript中，

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

Answer 30

如果你使用ASP.NET MVC ，生成许多checkbox，以后必须使用JavaScript 来select/取消全选，你可以执行以下操作。

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