关于javascript：使用jquery设置复选框的”选中”？


Setting “checked” for a checkbox with jQuery?

我想这样做，用jquery勾选checkbox：

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

或

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

这样的事情存在吗？

相关讨论

jQuery 1.6 +

使用新的EDCOX1×0方法：

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

jQuery 1.5 x及其以下

EDCOX1的0Ω方法不可用，因此需要使用EDCOX1×2。

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

注意，这是jQuery的单元测试在版本1.6之前使用的方法，最好使用。

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

因为后者将在最初检查框时，改变对包含它的任何形式的EDCOX1(3)调用的行为-这是一种微妙但可能不受欢迎的行为改变。

更详细地说，在从1.5.x过渡到1.6版本的发行说明和.prop()文档的属性与属性部分中，可以找到对checked属性/属性处理的一些不完整的讨论。

jquery的任何版本

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

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

使用.prop()和.attr()方法而不是这两种方法的好处是，它们将对所有匹配的元素进行操作。

相关讨论

用途：

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

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

1
$('.myCheckbox').is(':checked');
相关讨论

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

1
2
3
$('.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选择的任何元素的选中属性，并在所有情况下成功地选中和取消选中复选框。因此，虽然这看起来像是一个过度承受的解决方案，但它将使您的网站的用户体验更好，并有助于防止用户的挫折感。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
(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 );

或者，如果不想使用插件，可以使用以下代码段：

1
2
3
4
5
6
7
8
9
10
// Check
$(':checkbox').prop('checked', true);

// Un-check
$(':checkbox').prop('checked', false);

// Toggle
$(':checkbox').prop('checked', function (i, value) {
    return !value;
});
相关讨论

你可以做到

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

或

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

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

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

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

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

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

1
2
3
$(".myCheckbox").each(function(){
    $("#mycheckbox").click()
});
相关讨论

还可以使用新方法扩展$.fn对象：

1
2
3
4
5
6
7
8
9
10
(function($)  {
   $.fn.extend({
      check : function()  {
         return this.filter(":radio, :checkbox").attr("checked", true);
      },
      uncheck : function()  {
         return this.filter(":radio, :checkbox").removeAttr("checked");
      }
   });
}(jQuery));

然后你可以做：

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

或者，如果您使用其他一些使用这些名称的库，您可能希望为它们提供更多的唯一名称，如mycheck()和myuncheck()。

相关讨论

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

最后一个将激发复选框的单击事件，其他将不会。因此，如果在onclick事件中为要激发的复选框提供了自定义代码，请使用最后一个。

相关讨论

要选中复选框，应使用

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

或

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

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

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

如果你这样做了

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

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

错误的演示jquery 1.6。我想这个坏了。对于1.6，我将在这方面做一个新的帖子。

新的工作演示jquery 1.5.2在chrome中工作。

两个演示使用

1
2
3
4
5
6
7
$('#tc').click(function() {
    if ( $('#myCheckbox').attr('checked')) {
        $('#myCheckbox').attr('checked', false);
    } else {
        $('#myCheckbox').attr('checked', 'checked');
    }
});
相关讨论

这将选择具有指定属性且值包含给定子字符串"ckbitem"的元素：

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

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

假设问题是…

如何选中按值设置的复选框？

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

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

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

我没找到解决办法。我会一直使用：

1
2
3
4
5
6
7
8
if ($('#myCheckBox:checked').val() !== undefined)
{
    //Checked
}
else
{
    //Not checked
}
相关讨论

要使用jquery 1.6或更高版本选中复选框，只需执行以下操作：

1
checkbox.prop('checked', true);

要取消选中，请使用：

1
checkbox.prop('checked', false);

下面是我喜欢使用jquery切换复选框的方法：

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

如果使用jquery 1.5或更低版本：

1
checkbox.attr('checked', true);

要取消选中，请使用：

1
checkbox.attr('checked', false);

这里有一种不使用jquery的方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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);
1
2
3
4
5
6
<label>Click Me!
  <input id="cb" type="checkbox" />
</label>
<label>Reflection:
  <input id="rcb" type="checkbox" />
</label>

试试这个：

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

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

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

1
2
3
4
5
6
7
8
9
10
11
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:

1
2
3
4
5
6
7
8
9
10
11
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;
    });
});
相关讨论

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

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

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

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

1
$(objectElement).prop('checked');
相关讨论

如果您正在使用PhoneGap进行应用程序开发，并且您希望立即显示按钮上的值，请记住执行此操作。

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

我发现如果没有这个范围，不管您做什么，接口都不会更新。

下面是如何选中多个复选框的代码和演示…

http://jsfiddle.net/tamilmani/z8ttt/

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$("#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;
        }
    }
});
相关讨论

另一种可能的解决方案：

1
2
3
4
5
6
    var c = $("#checkboxid");
    if (c.is(":checked")) {
         $('#checkboxid').prop('checked', false);
    } else {
         $('#checkboxid').prop('checked', true);
    }

在Internet Explorer 9之前，请注意Internet Explorer中的内存泄漏，因为jquery文档声明：

In Internet Explorer prior to version 9, using .prop() to set a DOM
element property to anything other than a simple primitive value
(number, string, or boolean) can cause memory leaks if the property is
not removed (using .removeProp()) before the DOM element is removed
from the document. To safely set values on DOM objects without memory
leaks, use .data().

相关讨论

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

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

对于jQuery 1.6 +

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

对于jquery 1.5.x及以下版本

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

检查，

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

正如@livefree75所说：

jquery 1.5.x及以下

还可以使用新方法扩展$.fn对象：

1
2
3
4
5
6
7
8
9
10
(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 +

1
2
3
4
5
6
7
8
9
10
    (function($)  {
       $.fn.extend({
          check : function()  {
             return this.filter(":radio, :checkbox").prop("checked", true);
          },
          uncheck : function()  {
             return this.filter(":radio, :checkbox").prop("checked",false);
          }
       });
    }(jQuery));

然后你可以做：

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

检查和取消检查

1
2
$('.myCheckbox').prop('checked', true);
$('.myCheckbox').prop('checked', false);
相关讨论

1
2
3
4
$('controlCheckBox').click(function(){
    var temp = $(this).prop('checked');
    $('controlledCheckBoxes').prop('checked', temp);
});
相关讨论

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

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

或

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

更短的是：

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

这里还有一个JSFIDLE。

普通的javascript非常简单，而且开销要少得多：

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

这里例子

相关讨论

我不能让它工作使用：

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

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

1
2
$("#cb").prop('checked', 'true'); // For checking
$("#cb").prop('checked', '');     // For unchecking
相关讨论

当你选中一个复选框时，就像；

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

可能还不够。您还应该调用下面的函数；

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

尤其是当您删除复选框复选属性时。

这是完整的答案使用jQuery

我测试它，它100%工作：d

1
2
3
4
5
6
7
8
9
10
11
    // 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
2
3
if($("#checkboxId").is(':checked')){
    alert("Checked");
}

或

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

在JavaScript中，

1
2
3
if (document.getElementById("checkboxID").checked){
    alert("Checked");
}
相关讨论

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

HTML

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

JavaScript

1
2
3
4
5
6
7
8
9
10
11
function SelectAll() {      
        $('input[id^="ProductId_"]').each(function () {          
            $(this).prop('checked', true);
        });
    }

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

这可能对某人有所帮助。

HTML5

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

JavaScript。

1
2
3
4
5
6
7
8
9
10
11
  function handleOnClick(){

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

你可以试试这个：

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

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

相关讨论

1
$(".myCheckBox").prop("checked","checked");
相关讨论

如果您碰巧使用了引导程序(可能是不小心的)。

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

http://www.bootstraptogle.com/

2019年1月编辑

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

1
2
3
p {margin: 20px 0 0;}
b {color: red;}
label {color: red;}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <script src="https://code.jquery.com/jquery-1.10.2.js">
</head>
<body>
 
<input id="check1" type="checkbox" checked="checked">
<label for="check1">Check here</label>
<p>

</p>
 

$("input" ).change(function() {
  var $input = $( this );
  $("p" ).html(
   "The .attr( "checked" ):" + $input.attr("checked" ) +"" +
   "The .prop( "checked" ):" + $input.prop("checked" ) +"" +
   "The .is( ":checked" ):" + $input.is(":checked" ) +"" );
}).change();

 
</body>
</html>

关于角框架例1

在.html文件中

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

在.ts文件中

1
2
3
4
5
toggleEditable(event) {
     if ( event.target.checked ) {
         this.contentEditable = true;
    }
}

例2

在.html文件中

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

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

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

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

  • 第三种方法(勾选或不勾选复选框的检查条件)-$('.myCheckbox').is(':checked')。

    • 如果您使用的是.prop('checked', true|false)，并且没有更改复选框，则需要像这样添加trigger('click')。

    1
    2
    3
    4
    5
    6
    //check
    $('#checkboxF1').prop("checked", true).trigger('click');


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

    总体而言：

    1
    2
    3
    $("#checkAll").click(function(){
        $(".somecheckBoxes").prop('checked',$(this).prop('checked')?true:false);
    });