使用jQuery为复选框设置“checked”

我想这样做，使用jQuery勾选复选框：

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

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

这样的事情存在吗？

当前回答

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

2013-02-27 15:49:10

其他回答

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

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

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

更短的是：

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

这里还有一个jsFiddle。

2014-05-27 15:11:43

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

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

2014-07-08 18:22:56

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

$('.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选择的任何元素的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;
});

2011-05-06 19:31:21

纯JavaScript非常简单，开销也少得多：

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

此处的示例

2013-09-18 01:14:15

2019年1月编辑

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

p｛margin:20px 0 0；｝b｛颜色：红色；｝标签｛颜色：红色；｝<!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”>检查此处</label><p></p><脚本>$（“input”）.change（函数）{var$input=$（this）；$（“p”）.html(“.attr（\”checked\“）：<b>”+$input.attr“（”checked“）+”</b><br>“+“.prop（\”checked\“）：<b>”+$input.prop（”checked“）+“</b><br>”+“.is（\”：checked \“）：<b>”+$input.is（“：checked”）+“</b>”）；}).change（）；</script></body></html>

论角度框架

示例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')" />

2019-01-02 15:10:04

使用jQuery为复选框设置“checked”

推荐文章

最新文章

标签