使用jQuery为复选框设置“选中”？

时间：2009-01-08 22:20:25

标签： javascript jquery checkbox selected checked

我想做这样的事情，使用 jQuery 打勾checkbox：

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

或

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

这样的事情存在吗？

43 个答案:

答案 0 :(得分：5708)

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

请注意，这是the approach used by jQuery's unit tests prior to version 1.6，并且优于使用

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

因为后者会在最初检查框的情况下，在包含它的任何表单上更改对.reset()的调用行为 - 这是一个微妙但可能不受欢迎的行为更改。

有关更多背景信息，可以在version 1.6 release notes和中找到有关从1.5.x过渡到1.6的checked属性/属性处理更改的一些不完整的讨论.prop() documentation。的属性与属性部分

任何版本的jQuery

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

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

使用.prop()和.attr()方法代替此方法的好处是它们可以对所有匹配的元素进行操作。

答案 1 :(得分：666)

使用：

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

如果您想检查是否选中了复选框：

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

答案 2 :(得分：297)

这是使用jQuery检查和取消选中复选框的正确方法，因为它是跨平台标准，将允许表单重新发布。

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

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

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

问题（jQuery 1.6）：

用户点击复选框后，该复选框会停止响应“已检查”属性更改。

以下是某人在点击了复选框后无法完成工作的复选框属性示例（这种情况发生在Chrome中）。

<强> Fiddle

解决方案：

通过在DOM元素上使用JavaScript的“已检查”属性，我们可以直接解决问题，而不是尝试操纵DOM来执行我们想要它要执行的操作

Fiddle

此插件将更改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;
});

答案 3 :(得分：140)

你可以做到

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

或

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

如果你想要触发的复选框的onclick事件中有自定义代码，请改为使用此代码：

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

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

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

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

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

答案 4 :(得分：74)

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

答案 5 :(得分：63)

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

最后一个会触发复选框的click事件，其他人则不会。 因此，如果您要触发的复选框的onclick事件中有自定义代码，请使用最后一个。

答案 6 :(得分：61)

要选中复选框，您应该使用

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

或

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

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

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

如果你这样做

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

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

BAD DEMO jQuery 1.6。我认为这是破碎的。对于1.6，我将发布一个新帖子。

NEW WORKING DEMO jQuery 1.5.2适用于Chrome。

两个演示都使用

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

答案 7 :(得分：46)

这将选择具有指定属性的元素，其值包含给定的子串“ckbItem”：

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

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

答案 8 :(得分：45)

假设问题是......

如何选中复选框 BY VALUE？

请注意，在典型的复选框设置中，所有输入标记都具有相同的名称，它们因属性value 而不同：集合的每个输入都没有ID。

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

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

答案 9 :(得分：44)

我错过了解决方案。我将永远使用：

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

答案 10 :(得分：41)

要使用 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);

答案 11 :(得分：36)

这是一种没有jQuery的方法

＆＃13;
＆＃13; 
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);
＆＃13; 
<label>Click Me!
  <input id="cb" type="checkbox" />
</label>
<label>Reflection:
  <input id="rcb" type="checkbox" />
</label>
＆＃13;
＆＃13;
＆＃13;

答案 12 :(得分：30)

试试这个：

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

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

答案 13 :(得分：29)

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

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

答案 14 :(得分：27)

我们可以使用elementObject和jQuery来检查属性：

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

我们可以将它用于所有jQuery版本而不会出现任何错误。

更新：Jquery 1.6+有一个新的prop方法取代了attr，例如：

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

答案 15 :(得分：25)

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

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

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

答案 16 :(得分：24)

以下是如何检查多个复选框的代码和演示......

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

答案 17 :(得分：20)

另一种可能的解决方案：

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

答案 18 :(得分：18)

如果使用移动设备并且您希望更新界面并将复选框显示为未选中，请使用以下选项：

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

答案 19 :(得分：18)

请注意Internet Explorer 9之前的Internet Explorer中的内存泄漏，jQuery documentation states：

  

在版本9之前的Internet Explorer中，使用.prop（）设置DOM   element属性除了简单的原始值以外的任何值   （number，string或boolean）如果属性是，则可能导致内存泄漏   在删除DOM元素之前不删除（使用.removeProp（））   从文件。在没有内存的情况下安全地设置DOM对象的值   泄漏，使用.data（）。

答案 20 :(得分：18)

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

答案 21 :(得分：17)

检查和取消选中

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

答案 22 :(得分：17)

正如@ 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();

答案 23 :(得分：16)

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

答案 24 :(得分：15)

这可能是最短且最简单的解决方案：

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

或

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

更短的是：

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

这里也是a jsFiddle。

答案 25 :(得分：14)

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

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

Example here

答案 26 :(得分：13)

当您勾选一个复选框时，

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

可能还不够。您还应该调用以下函数; 

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

特别是当您删除了复选框选中的属性时。

答案 27 :(得分：13)

我无法使用：

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

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

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

答案 28 :(得分：11)

以下是完整的答案 使用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
    });

答案 29 :(得分：10)

在jQuery中，

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

或

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

在JavaScript中，

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

答案 30 :(得分：10)

如果您使用ASP.NET MVC，请生成许多复选框，然后使用 选择/取消选择所有 ，您可以执行以下操作。

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

答案 31 :(得分：8)

这可能有助于某人。

HTML5 

 <input id="check_box" type="checkbox" onclick="handleOnClick()">

的JavaScript。

  function handleOnClick(){

      if($("#check_box").prop('checked'))
      {        
          console.log("current state: checked");
      }
      else
      {         
          console.log("current state: unchecked");
      }    
 }

答案 32 :(得分：5)

你可以试试这个：

$('input[name="activity[task_state]"]').val("specify the value you want to check ")

答案 33 :(得分：5)

＆＃13;
＆＃13; 
if($('jquery_selector').is(":checked")){
  //somecode
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
＆＃13;
＆＃13;
＆＃13;

答案 34 :(得分：4)

$(".myCheckBox").prop("checked","checked");

答案 35 :(得分：3)

如果你碰巧使用Bootstrap（也许是不知不觉）...... 

$('#myCheckbox').bootstrapToggle('on')
$('#myCheckbox').bootstrapToggle('off')

http://www.bootstraptoggle.com/

答案 36 :(得分：1)

您可以使用JS以不同方式检查复选框检查条件。你可以在下面看到。

  1. 第一种方法 - $('.myCheckbox').prop('checked', true);

  2. 第二种方法 - $('.myCheckbox').attr('checked', true);

  3. 第三种方法（如果选中复选框，则为检查条件） - $('.myCheckbox').is(':checked')

答案 37 :(得分：1)

如果您正在使用.prop('checked', true|false)并且未更改复选框，则需要像这样添加trigger('click') 

//check
$('#checkboxF1').prop( "checked", true).trigger('click');


//un-Check
$('#checkboxF1').prop( "checked", true).trigger('click');

答案 38 :(得分：1)

于2019年1月编辑

您可以使用：.prop( propertyName )-添加的版本：1.6 

p {margin: 20px 0 0;}
b {color: red;}
label {color: red;}
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<input id="check1" type="checkbox" checked="checked">
<label for="check1">Check here</label>
<p></p>
 
<script>
$( "input" ).change(function() {
  var $input = $( this );
  $( "p" ).html(
    "The .attr( \"checked\" ): <b>" + $input.attr( "checked" ) + "</b><br>" +
    "The .prop( \"checked\" ): <b>" + $input.prop( "checked" ) + "</b><br>" +
    "The .is( \":checked\" ): <b>" + $input.is( ":checked" ) + "</b>" );
}).change();
</script>
 
</body>
</html>

在Angular Framework上

示例1

在您的.html文件中 

<input type="checkbox" (change)="toggleEditable($event)">

在您的.ts文件中 

toggleEditable(event) {
     if ( event.target.checked ) {
         this.contentEditable = true;
    }
}

示例2

在您的.html文件中 

<input type="checkbox" [(ngModel)]="isChecked" (change)="checkAction(isChecked ? 'Action1':'Action2')" />

答案 39 :(得分：1)

如果您有ID可以检查它，就可以这样做

document.getElementById('ElementId').checked = false

然后取消选中

document.getElementById('ElementId').checked = true

答案 40 :(得分：-1)

JS解决方案也可以很简单且开销更少

document.querySelectorAll('.myCheckBox').forEach(x=> x.checked=1)


document.querySelectorAll('.myCheckBox').forEach(x=> x.checked=1)
checked A: <input type="checkbox" class="myCheckBox"><br/>
unchecked: <input type="checkbox"><br/>
checked B: <input type="checkbox" class="myCheckBox"><br/>

答案 41 :(得分：-1)

如果您考虑使用 vanilla js 而不是 jquery，则有一个解决方案：

//for one element: 
document.querySelector('.myCheckBox').checked = true /* or false */ //will select the first matched element
//for multiple elements:
for (const checkbox of document.querySelectorAll('.myCheckBox')) {
checkbox.checked = true //or false
}

答案 42 :(得分：-6)

总体而言：

$("#checkAll").click(function(){
    $(".somecheckBoxes").prop('checked',$(this).prop('checked')?true:false);
});
相关问题
最新问题