Tôi muốn làm một cái gì đó như thế này để đánh dấu checkboxbằng cách sử dụng jQuery :

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

hoặc là

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

Có một điều như vậy tồn tại?

JQuery hiện đại

Sử dụng .prop():

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

API DOM

Nếu bạn đang làm việc chỉ với một yếu tố, bạn luôn có thể truy cập vào bên dưới HTMLInputElementvà sửa đổi thuộc tính của nó .checked:

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

Lợi ích của việc sử dụng .prop()và .attr()phương thức thay vì điều này là chúng sẽ hoạt động trên tất cả các yếu tố phù hợp.

jQuery 1.5.x trở xuống

Các .prop()phương pháp không có sẵn, vì vậy bạn cần phải sử dụng .attr().

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

Lưu ý rằng đây là cách tiếp cận được sử dụng bởi các thử nghiệm đơn vị của jQuery trước phiên bản 1.6 và thích hợp hơn là sử dụng$('.myCheckbox').removeAttr('checked'); vì sau này, nếu hộp được kiểm tra ban đầu, hãy thay đổi hành vi của một cuộc gọi sang .reset()bất kỳ dạng nào có chứa nó - một cách tinh tế nhưng có lẽ thay đổi hành vi không mong muốn.

Để biết thêm ngữ cảnh, một số thảo luận không đầy đủ về các thay đổi đối với việc xử lý checkedthuộc tính / thuộc tính trong quá trình chuyển đổi từ 1.5.x sang 1.6 có thể được tìm thấy trong ghi chú phát hành phiên bản 1.6 và phần Thuộc tính so với Thuộc tính của .prop()tài liệu .

Sử dụng:

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

Và nếu bạn muốn kiểm tra xem hộp kiểm có được kiểm tra hay không:

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

Đây là cách chính xác để kiểm tra và bỏ chọn các hộp kiểm với jQuery, vì đây là tiêu chuẩn đa nền tảng và sẽ cho phép đăng lại mẫu.

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

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

Bằng cách này, bạn đang sử dụng các tiêu chuẩn JavaScript để kiểm tra và bỏ chọn các hộp kiểm, do đó, bất kỳ trình duyệt nào thực hiện đúng thuộc tính "đã kiểm tra" của phần tử hộp kiểm sẽ chạy mã này một cách hoàn hảo. Điều này nên là tất cả các trình duyệt chính, nhưng tôi không thể kiểm tra trước Internet Explorer 9.

Vấn đề (jQuery 1.6):

Khi người dùng nhấp vào hộp kiểm, hộp kiểm đó sẽ ngừng phản ứng với các thay đổi thuộc tính "đã chọn".

Dưới đây là một ví dụ về thuộc tính hộp kiểm không thực hiện công việc sau khi ai đó đã nhấp vào hộp kiểm (điều này xảy ra trong Chrome).

Vĩ cầm

Giải pháp:

Bằng cách sử dụng thuộc tính "đã kiểm tra" của JavaScript trên các thành phần DOM , chúng tôi có thể giải quyết vấn đề trực tiếp, thay vì cố gắng thao túng DOM để thực hiện những gì chúng tôi muốn .

Vĩ cầm

Plugin này sẽ thay đổi thuộc tính được kiểm tra của bất kỳ thành phần nào được jQuery chọn và kiểm tra và bỏ chọn thành công các hộp kiểm trong mọi trường hợp. Vì vậy, trong khi điều này có vẻ như là một giải pháp quá sức, nó sẽ giúp trải nghiệm người dùng trang web của bạn tốt hơn và giúp ngăn chặn sự thất vọng của người dùng.

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

Ngoài ra, nếu bạn không muốn sử dụng plugin, bạn có thể sử dụng các đoạn mã sau:

// Check
$(':checkbox').prop('checked', true);

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

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

Bạn có thể làm

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

hoặc là

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

Nếu bạn có mã tùy chỉnh trong sự kiện onclick cho hộp kiểm mà bạn muốn kích hoạt, thay vào đó hãy sử dụng mã này:

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

Bạn có thể bỏ chọn bằng cách xóa hoàn toàn thuộc tính:

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

Bạn có thể kiểm tra tất cả các hộp kiểm như thế này:

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

Bạn cũng có thể mở rộng đối tượng $ .fn bằng các phương thức mới:

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

Sau đó, bạn có thể làm:

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

Hoặc bạn có thể muốn cung cấp cho họ các tên độc đáo hơn như mycheck () và myuncheck () trong trường hợp bạn sử dụng một số thư viện khác sử dụng các tên đó.

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

Cái cuối cùng sẽ kích hoạt sự kiện click cho hộp kiểm, những cái khác thì không. Vì vậy, nếu bạn có mã tùy chỉnh trong sự kiện onclick cho hộp kiểm mà bạn muốn kích hoạt, hãy sử dụng mã cuối cùng.

Để kiểm tra một hộp kiểm bạn nên sử dụng

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

hoặc là

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

và để bỏ chọn hộp kiểm, bạn phải luôn đặt nó thành false:

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

Nếu bạn làm

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

nó loại bỏ tất cả các thuộc tính cùng nhau và do đó bạn sẽ không thể đặt lại biểu mẫu.

BAD DEMO jQuery 1.6 . Tôi nghĩ rằng điều này là bị hỏng. Cho 1.6 tôi sẽ thực hiện một bài viết mới về điều đó.

CÔNG VIỆC MỚI DEMO jQuery 1.5.2 hoạt động trong Chrome.

Cả hai bản demo đều sử dụng

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

Điều này chọn các phần tử có thuộc tính được chỉ định với giá trị chứa chuỗi con đã cho "ckbItem":

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

Nó sẽ chọn tất cả các thành phần có chứa ckbItem trong thuộc tính tên của nó.

Giả sử rằng câu hỏi là ...

Làm cách nào để kiểm tra hộp kiểm được đặt theo GIÁ TRỊ?

Hãy nhớ rằng trong một bộ hộp kiểm thông thường, tất cả các thẻ đầu vào có cùng tên, chúng khác nhau bởi thuộc tínhvalue : không có ID cho mỗi đầu vào của bộ.

Câu trả lời của Xian có thể được mở rộng với bộ chọn cụ thể hơn , sử dụng dòng mã sau:

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

Tôi đang thiếu giải pháp. Tôi sẽ luôn sử dụng:

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

Để kiểm tra hộp kiểm bằng jQuery 1.6 trở lên, chỉ cần làm điều này:

checkbox.prop('checked', true);

Để bỏ chọn, sử dụng:

checkbox.prop('checked', false);

Đây là những gì tôi muốn sử dụng để chuyển đổi hộp kiểm bằng jQuery:

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

Nếu bạn đang sử dụng jQuery 1.5 trở xuống:

checkbox.attr('checked', true);

Để bỏ chọn, sử dụng:

checkbox.attr('checked', false);

Đây là một cách để làm điều đó mà không cần 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>

Đây là mã để kiểm tra và bỏ chọn bằng một nút:

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

Cập nhật: Đây là cùng một khối mã sử dụng phương thức prop Jquery 1.6+ mới hơn, thay thế 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;
    });
});

Thử cái này:

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

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

Chúng ta có thể sử dụng elementObjectvới jQuery để kiểm tra thuộc tính:

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

Chúng tôi có thể sử dụng điều này cho tất cả các phiên bản jQuery mà không có bất kỳ lỗi nào.

Cập nhật: Jquery 1.6+ có phương thức chống đỡ mới thay thế attr, ví dụ:

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

Nếu bạn đang sử dụng PhoneGap để phát triển ứng dụng và bạn có một giá trị trên nút mà bạn muốn hiển thị ngay lập tức, hãy nhớ làm điều này

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

Tôi thấy rằng không có nhịp, giao diện sẽ không cập nhật cho dù bạn làm gì.

Dưới đây là mã và bản demo để biết cách kiểm tra nhiều hộp kiểm ...

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

Một giải pháp khả thi khác:

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

Như @ livefree75 đã nói:

jQuery 1.5.x trở xuống

Bạn cũng có thể mở rộng đối tượng $ .fn bằng các phương thức mới:

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

Nhưng trong các phiên bản mới của jQuery, chúng ta phải sử dụng một cái gì đó như thế này:

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

Sau đó, bạn có thể làm:

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

Nếu sử dụng điện thoại di động và bạn muốn giao diện cập nhật và hiển thị hộp kiểm là không được chọn, hãy sử dụng như sau:

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

Lưu ý về rò rỉ bộ nhớ trong Internet Explorer trước Internet Explorer 9 , vì tài liệu jQuery nêu :

Trong Internet Explorer trước phiên bản 9, sử dụng .prop () để đặt thuộc tính phần tử DOM thành bất kỳ giá trị nào khác ngoài giá trị nguyên thủy đơn giản (số, chuỗi hoặc boolean) có thể gây rò rỉ bộ nhớ nếu thuộc tính không bị xóa (sử dụng .removeProp ( )) trước khi phần tử DOM được xóa khỏi tài liệu. Để đặt giá trị an toàn trên các đối tượng DOM mà không bị rò rỉ bộ nhớ, hãy sử dụng .data ().

Dành cho jQuery 1.6+

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

Dành cho jQuery 1.5.x trở xuống

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

Để kiểm tra,

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

Để kiểm tra và bỏ chọn

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

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

Đây có lẽ là giải pháp ngắn nhất và dễ nhất:

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

hoặc là

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

Thậm chí ngắn hơn sẽ là:

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

Đây là một jsFiddle là tốt.

Plain JavaScript rất đơn giản và ít chi phí hơn nhiều:

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

Ví dụ ở đây

Tôi không thể làm cho nó hoạt động bằng cách sử dụng:

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

Cả đúng và sai sẽ kiểm tra hộp kiểm. Những gì làm việc cho tôi là:

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

Khi bạn kiểm tra một hộp kiểm như;

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

nó có thể không đủ Bạn cũng nên gọi hàm dưới đây;

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

Đặc biệt là khi bạn loại bỏ thuộc tính hộp kiểm tra.

Đây là câu trả lời hoàn chỉnh bằng jQuery

Tôi kiểm tra nó và nó hoạt động 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
    });

Trong jQuery,

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

hoặc là

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

Trong JavaScript,

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