a

Câu hỏi Thiết lập "kiểm tra" cho một hộp kiểm với jQuery?


Tôi muốn làm một cái gì đó như thế này để đánh dấu một checkbox 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?


3606
2018-01-08 22:20


gốc


Câu hỏi cụ thể hơn (và rất hữu ích!), "Làm cách nào để kiểm tra một mục trong tập hợp hộp kiểm BY VALUE?", Tôi nghĩ chúng tôi cũng có thể thảo luận ở đây và tôi đã đăng câu trả lời bên dưới. - Peter Krauss
Kiểm tra các cách khác để thực hiện việc này bằng cách sử dụng jQuery tại đây stackoverflow.com/a/22019103/1868660 - Subodh Ghulaxe
Nếu bạn cần sự kiện onchange được kích hoạt, nó $("#mycheckbox").click(); - HumanInDisguise
"Kiểm tra một cái gì đó" gợi ý thử nghiệm nó, vì vậy tôi nghĩ rằng 'Làm một hộp kiểm tra' là một tiêu đề rõ ràng hơn và tốt hơn. - Alireza
prop (); chức năng là câu trả lời hoàn hảo. Xem định nghĩa hàm - api.jquery.com/prop - yogihosting


Các câu trả lời:


jQuery 1.6+

Sử dụng mới .prop() phương pháp:

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

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 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 bài kiểm tra đơn vị của jQuery trước phiên bản 1.6 và thích hợp hơn khi 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 cuộc gọi đến .reset() trên bất kỳ hình thức nào có chứa nó - một thay đổi hành vi tinh tế nhưng có lẽ không được hoan nghênh.

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

Bất kỳ phiên bản jQuery nào

Nếu bạn chỉ làm việc với một phần tử, bạn luôn có thể sửa đổi HTMLInputElement'S .checked bất động sản:

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

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


5409
2018-01-08 22:25



@Xian loại bỏ thuộc tính đã kiểm tra khiến không thể đặt lại biểu mẫu - mcgrailm
Là một lưu ý phụ, jQuery 1.6.1 nên khắc phục vấn đề tôi đã đề cập, vì vậy chúng ta có thể tehcnically tất cả vẫn quay trở lại sử dụng $ (...). Prop (...) - cwharris
"Nếu bạn đang làm việc với chỉ một phần tử, nó sẽ luôn luôn nhanh nhất để sử dụng DOMElement.checked = true"Nhưng nó sẽ không đáng kể, bởi vì nó chỉ là một phần tử ... - Tyler Crompton
Như Tyler nói, đó là một cải tiến không đáng kể trong hoạt động. Đối với tôi, mã hóa bằng cách sử dụng một API phổ biến làm cho nó dễ đọc hơn so với trộn API gốc và API jQuery. Tôi muốn gắn bó với jQuery. - Charlie Kilian
@TylerCrompton - Tất nhiên, nó không hoàn toàn về hiệu suất, nhưng làm $(element).prop('checked') là một sự lãng phí hoàn toàn của việc gõ. element.checked tồn tại và nên được sử dụng trong các trường hợp bạn đã có element - gnarf


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 chọn hay không:

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

624
2018-01-08 22:25



cũng chọn $ (selector) .checked to check - eomeroff
Tôi đã thử mã này chính xác và nó đã không làm việc cho tôi trong trường hợp của một chọn tất cả / chọn không có hộp kiểm mà cần phải kiểm tra và bỏ chọn tất cả cũng như kiểm tra nhà nước của họ. Thay vào đó, tôi đã thử câu trả lời của @Christopher Harris và điều đó đã xảy ra. - JD Smith
Tại sao lại sử dụng "form # mycheckbox" thay vì chỉ đơn giản là "#mycheckbox"? Id đã là duy nhất trong toàn bộ tài liệu, nhanh hơn và đơn giản hơn để chọn nó trực tiếp. - YuriAlbuquerque
@YuriAlbuquerque đó là một ví dụ. bạn có thể sử dụng bất kỳ bộ chọn nào bạn muốn. - bchhun
$ (selector) .checked không hoạt động. Không có phương pháp 'được kiểm tra' trong jQuery. - Brendan Byrd


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

$('.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, vì vậy 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 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 đó đối với 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 hồi lại các thay đổi thuộc tính "đã kiểm tra".

Dưới đây là ví dụ về thuộc tính hộp kiểm không thực hiện được công việc sau khi ai đó có đã nhấp 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 DOM các yếu tố, chúng tôi có thể giải quyết trực tiếp vấn đề, thay vì cố gắng điều khiển DOM để làm những gì chúng tôi muốn nó phải làm.

Vĩ cầm

Plugin này sẽ thay đổi thuộc tính đã chọn của bất kỳ phần tử nào được chọn bởi jQuery và kiểm tra và bỏ chọn hộp kiểm thành công trong mọi trường hợp. Vì vậy, trong khi điều này có vẻ giống như một giải pháp quá sức chịu đựng, nó sẽ làm cho trải nghiệm người dùng của 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;
});

284
2018-05-06 19:31



Trong ví dụ JSFiddle đầu tiên của bạn, bạn nên sử dụng removeAttr('checked') thay vì attr('checked', false) - Daniel X Moore
@DanielXMoore, Bạn đang loanh quanh vấn đề. Ví dụ là để cho thấy rằng khi hộp kiểm được người dùng nhấp vào, trình duyệt không còn phản hồi checked thay đổi thuộc tính, bất kể của phương pháp được sử dụng để thay đổi chúng. - cwharris
@ChristopherHarris Ok, bạn nói đúng, tôi đã bỏ lỡ điều đó. Theo jQuery 1.6, bạn không nên sử dụng phương thức .prop?$('.myCheckBox').prop('checked', true) Bằng cách đó, nó sẽ tự động áp dụng cho toàn bộ các phần tử đã so khớp (chỉ khi thiết lập mặc dù, nhận được vẫn chỉ là phần tử đầu tiên) - Daniel X Moore
Vâng. prop chắc chắn là cách thích hợp để thiết lập các thuộc tính trên một phần tử. - cwharris
Plugin nhỏ đẹp, cảm ơn! Để duy trì chainability, thêm "trả lại này" ngay trước khi kết thúc của plugin. - JD Smith


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, hãy sử dụng mã này để thay thế:

$("#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ể chọn tất cả các hộp kiểm như sau:

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

130
2018-01-08 22:24



bạn cũng có thể đi $ ("# myTable input: checkbox"). each (...); - Chris Brandsma
Bạn cũng có thể đi $(".myCheckbox").click() - RobertPitt
@Michah loại bỏ thuộc tính đã kiểm tra khiến không thể đặt lại biểu mẫu - mcgrailm
Câu trả lời này đã lỗi thời vì nó sử dụng .attr thay vì .prop. - Blazemonger
$("#mycheckbox").click(); đã làm việc cho tôi vì tôi cũng đang nghe thay đổi sự kiện và .attr & .prop không kích hoạt sự kiện thay đổi. - Damodar Bashyal


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 chỉ có thể làm:

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

Hoặc bạn có thể muốn cung cấp cho họ nhiều 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 đó.


67
2017-08-20 18:19



@ livfree75 xóa thuộc tính đã chọn khiến không thể đặt lại biểu mẫu - mcgrailm
Câu trả lời này đã lỗi thời vì nó sử dụng .attr thay vì .prop. - Blazemonger


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

Người cuối cùng sẽ kích hoạt sự kiện nhấp chuột cho hộp kiểm, những người khác sẽ không kích hoạt. 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.


58
2018-01-08 22:36



đầu một sẽ thất bại ... kiểm tra không phải là một thành viên đối tượng jquery - redsquare
Câu trả lời này đã lỗi thời vì nó sử dụng .attr thay vì .prop. - Blazemonger


Để chọn 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 nên luôn đặt thành false:

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

Nếu bạn làm

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

nó loại bỏ các thuộc tính tất cả 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 bị hỏng. Đối với 1,6 tôi sẽ làm một bài mới về điều đó.

DEMO LÀM VIỆC MỚI 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');
    }
});

56
2018-03-23 15:22



Điều này là không chính xác. đặt thuộc tính 'đã chọn' thành '' sẽ không phải bỏ chọn hộp kiểm trong ít nhất chrome. - cwharris
@ xixonia Tôi đã kiểm tra trước khi tôi đăng fiddle của bạn không hoạt động bởi vì bạn đã không thay đổi menu bên trái để bao gồm jquery - mcgrailm
mcgralim - trong 1,6 của nó thậm chí còn dễ dàng hơn .... $(".mycheckbox").prop("checked", true/false) - gnarf
@MarkAmery bạn đã đề cập rằng bài đăng của tôi không được thêm gì vào thời điểm đăng bài nhưng điều đó là chính xác. Nếu bạn nhìn vào lịch sử của câu trả lời được chấp nhận, bạn sẽ thấy họ đề xuất xóa phần tử. Mà làm cho nó không thể thiết lập lại các hình thức, đó là lý do tại sao tôi đăng để bắt đầu với. - mcgrailm
@mcgrailm Tôi đã đi trước và sửa đổi câu trả lời được chấp nhận trong ánh sáng của nhận xét của bạn. Nếu bạn muốn bỏ qua nó và kiểm tra xem nó có tốt trong trạng thái hiện tại của nó không, tôi sẽ đánh giá cao điều đó. Tôi xin lỗi lần nữa vì đã đưa ra những lời chỉ trích sắc bén, ít nhất là một phần, rất sai lầm. - Mark Amery


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

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

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

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

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

42
2018-06-24 11:33