Javascript 设置“；勾选“；对于带有jQuery的复选框

我想使用jQuery来勾选

复选框

：

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

或

这样的事情存在吗？

你可以这样做

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

或

如果要激发的复选框在onclick事件中有自定义代码，请改用此代码：

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

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

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

您可以选中以下所有复选框：

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

现代jQuery 使用：

domapi

---

如果只使用一个元素，则始终可以访问基础元素并修改其属性：

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

使用

.prop（）

和

.attr（）

方法代替此方法的好处是，它们将对所有匹配的元素进行操作

jQuery 1.5.x及以下版本

.prop（）

方法不可用，因此需要使用

请注意，这比使用

$（'.myCheckbox'）更好因为如果最初选中该框，则后者将改变对包含它的任何表单的调用行为–这是一种微妙但可能不受欢迎的行为改变

如需了解更多内容，可在和的属性与属性部分中找到从1.5.x过渡到1.6时对
选中的
属性/属性处理更改的一些不完整的讨论。
使用：

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

如果要检查复选框是否已选中：

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

最后一个将触发复选框的单击事件，其他的则不会。
因此，如果要激发复选框的onclick事件中有自定义代码，请使用最后一个。
还可以使用新方法扩展$.fn对象：

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

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

    $(":checkbox").check();
    $(":checkbox").uncheck();

或者，如果您使用其他使用这些名称的库，您可能希望为它们提供更多唯一的名称，如mycheck（）和myuncheck（）。
这将选择具有指定属性且值包含给定子字符串“ckbItem”的元素：

它将选择名称属性中包含ckbItem的所有元素。
选中您应该使用的复选框

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

或

要取消选中复选框，应始终将其设置为false：

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

如果你这样做

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

它会同时删除属性，因此您将无法重置表单

。我想这个坏了。对于1.6，我将对此发表一篇新文章

在铬上工作

两个演示都使用

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

这是使用jQuery选中和取消选中复选框的正确方法，因为它是跨平台的标准，并且允许表单重新提交

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

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

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

问题（jQuery 1.6）：

一旦用户单击复选框，该复选框将停止响应“已选中”属性更改

下面是一个复选框属性在有人单击复选框后无法执行任务的示例（这种情况发生在Chrome中）


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

解决方案：

通过在元素上使用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;
});

我们可以将
elementObject
与jQuery一起使用，以检查属性：

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

我们可以对所有jQuery版本使用它，而不会出现任何错误

更新：Jquery 1.6+使用了新的prop方法替换attr，例如：

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

下面是使用按钮选中和取消选中的代码：

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

我无法使用以下命令使其工作：

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

true和false都会选中复选框。对我起作用的是：

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

假设问题是

如何选中按值设置的复选框？
请记住，在一个典型的复选框集中，所有输入标记都有相同的名称，它们因属性
值不同而不同：集合的每个输入都没有ID

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

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

如果您正在使用doing application development，并且您希望立即显示按钮上的值，请记住执行此操作

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

我发现如果没有span，无论您做什么，界面都不会更新。
我缺少解决方案。我将始终使用：

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

试试这个：

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

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

这里有一种不用jQuery的方法


函数addOrAttachListener（el、类型、侦听器、useCapture）{
如果（el.addEventListener）{
el.addEventListener（类型、侦听器、useCapture）；
}否则，如果（见附件）{
el.attachEvent（“on”+类型，侦听器）；
}
};
AddOratachListener（窗口，“加载”，函数（）{
var cbElem=document.getElementById（“cb”）；
var rcbElem=document.getElementById（“rcb”）；
AddOratachListener（cbElem，“单击”，函数（）{
rcbElem.checked=cbElem.checked；
}，假）；
}，假）
点击我！
反思：
如果使用mobile，并且希望界面更新并显示复选框为未选中状态，请使用以下命令：

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

以下是完整的答案
使用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 1.6或更高版本选中复选框，只需执行以下操作：

checkbox.prop('checked', true);

要取消选中，请使用：

checkbox.prop('checked', false);

checkbox.attr('checked', false);

这是我喜欢的
    // 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
    });

checkbox.prop('checked', true);

checkbox.prop('checked', false);

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

checkbox.attr('checked', true);

checkbox.attr('checked', false);

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

$("#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 elements = document.getElementsByClassName('myCheckBox');
for(var i = 0; i < elements.length; i++)
{
    elements[i].checked = true;
}

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

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

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

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

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

@foreach (var item in Model)
{
    @Html.CheckBox(string.Format("ProductId_{0}", @item.Id), @item.IsSelected)
}

function SelectAll() {       
        $('input[id^="ProductId_"]').each(function () {          
            $(this).prop('checked', true);
        });
    }

    function UnselectAll() {
        $('input[id^="ProductId_"]').each(function () {
            $(this).prop('checked', false);
        });
    }

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

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

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

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

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

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

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