Thêm thuộc tính 'đã chọn' khi nhấp vào jquery

Question

Tôi đã cố gắng tìm hiểu cách thêm thuộc tính "đã chọn" vào hộp kiểm khi nhấp. Lý do tôi muốn làm điều này là vì vậy nếu tôi đánh dấu chọn một hộp kiểm; Tôi có thể lưu trữ cục bộ của mình để lưu nó dưới dạng html để khi trang làm mới, thông báo hộp kiểm được chọn. Kể từ bây giờ nếu tôi kiểm tra nó đi, nó mất dần cha mẹ, nhưng nếu tôi lưu và tải lại nó vẫn bị mờ nhưng hộp kiểm được bỏ chọn.

Tôi đã thử thực hiện $ (this) .attr ('checked'); nhưng nó dường như không muốn thêm kiểm tra.

EDIT: Sau khi đọc nhận xét có vẻ như tôi không rõ ràng. thẻ đầu vào mặc định của tôi là:

<input type="checkbox" class="done"> 

tôi cần nó đầu như vậy khi tôi nhấp vào hộp kiểm, nó cho biết thêm "kiểm tra" vào cuối về điều đó. Ví dụ:

<input type="checkbox" class="done" checked> 

Tôi cần nó để làm như vậy khi tôi lưu html vào bộ nhớ cục bộ, khi tải, nó sẽ hiển thị hộp kiểm như đã chọn.

$(".done").live("click", function(){ 
if($(this).parent().find('.editor').is(':visible')) { 
var editvar = $(this).parent().find('input[name="tester"]').val(); 
$(this).parent().find('.editor').fadeOut('slow'); 
$(this).parent().find('.content').text(editvar); 
$(this).parent().find('.content').fadeIn('slow'); 
} 
if ($(this).is(':checked')) { 
$(this).parent().fadeTo('slow', 0.5); 
$(this).attr('checked'); //This line 
}else{ 

$(this).parent().fadeTo('slow', 1); 
$(this).removeAttr('checked'); 
} 
}); 

Answer 1

Dường như đây là một trong những dịp hiếm hoi về việc sử dụng thuộc tính thực sự phù hợp. Phương pháp attr() của jQuery sẽ không giúp bạn bởi vì trong hầu hết các trường hợp (bao gồm cả điều này) nó thực sự thiết lập một thuộc tính, không phải là một thuộc tính, làm cho sự lựa chọn tên của nó trông hơi ngu xuẩn. [UPDATE: Kể từ jQuery 1.6.1, the situation has changed slightly]

IE có một số vấn đề với phương pháp DOM setAttribute nhưng trong trường hợp này cần sử dụng tốt:

this.setAttribute("checked", "checked"); 

Trong IE, điều này sẽ luôn thực sự làm hộp kiểm được chọn. Trong các trình duyệt khác, nếu người dùng đã chọn và bỏ chọn hộp kiểm, việc đặt thuộc tính sẽ không có hiệu ứng hiển thị.Do đó, nếu bạn muốn đảm bảo hộp kiểm được kiểm tra cũng như có thuộc tính checked, bạn cần phải thiết lập các checked bất động sản cũng như:

this.setAttribute("checked", "checked"); 
this.checked = true; 

Để bỏ chọn hộp kiểm và loại bỏ các thuộc tính, làm như sau:

this.setAttribute("checked", ""); // For IE 
this.removeAttribute("checked"); // For other browsers 
this.checked = false; 

Answer 2

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

chỉ attr('checked') sẽ trả về giá trị của $ thuộc tính (this) 's kiểm tra. Để thiết lập nó, bạn cần đối số thứ hai. Dựa trên <input type="checkbox" checked="checked" />

Edit:

dựa trên ý kiến, một thao tác thích hợp hơn sẽ là:

$(this).attr('checked', true) 

Và một phương pháp javascript thẳng, phù hợp và hiệu quả hơn:

this.checked = true; 

Cảm ơn @Andy E cho điều đó.

Answer 3

Nếu .attr() không được làm việc cho bạn (đặc biệt là khi kiểm tra và hộp bỏ chọn liên tiếp), sử dụng .prop() thay vì .attr().

Answer 4

sử dụng mã này

var sid = $(this); 
sid.attr('checked','checked');