Kiểm tra/Bỏ chọn hộp kiểm bằng JavaScript?

Question

Làm cách nào để kiểm tra/bỏ chọn hộp kiểm bằng JavaScript hoặc jQuery?

Answer 1

Javascript:

// Check 
document.getElementById("checkbox").checked = true; 

// Uncheck 
document.getElementById("checkbox").checked = false; 

jQuery (1.6 trở lên):

// Check 
$("#checkbox").prop("checked", true); 

// Uncheck 
$("#checkbox").prop("checked", false); 

jQuery (1,5-):

// Check 
$("#checkbox").attr("checked", true); 

// Uncheck 
$("#checkbox").attr("checked", false); 

Answer 2

để kiểm tra:

document.getElementById("id-of-checkbox").checked = true; 

để bỏ chọn:

document.getElementById("id-of-checkbox").checked = false; 

Answer 3

Chúng ta có thể kiểm tra một hộp kiểm hạt như,

$('id of the checkbox')[0].checked = true 

và bỏ chọn bằng,

$('id of the checkbox')[0].checked = false 

Answer 4

hành vi quan trọng mà chưa được đề cập:

Đặt theo lập trình các thuộc tính được kiểm tra, không kích hoạt sự kiện change của hộp kiểm.

Xem cho chính mình trong fiddle này:
http://jsfiddle.net/fjaeger/L9z9t04p/4/

(Fiddle thử nghiệm trong Chrome 46, Firefox 41 và IE 11)

Các click() phương pháp

Một ngày nào đó bạn có thể thấy mình viết mã, dựa vào sự kiện được kích hoạt. Để đảm bảo sự kiện cháy, gọi phương thức click() của phần tử checkbox, như thế này:

document.getElementById('checkbox').click(); 

Tuy nhiên, đây Toggles tình trạng kiểm tra của hộp kiểm, thay vì đặc biệt thiết lập nó để true hoặc false. Hãy nhớ rằng sự kiện change chỉ nên kích hoạt khi thuộc tính đã chọn thực sự thay đổi.

Nó cũng áp dụng cho cách jQuery: đặt thuộc tính bằng cách sử dụng prop hoặc attr, không kích hoạt sự kiện change.

Thiết checked đến một giá trị cụ thể

Bạn có thể kiểm tra các thuộc tính checked, trước khi gọi phương thức click().Ví dụ:

function toggle(checked) { 
    var elm = document.getElementById('checkbox'); 
    if (checked != elm.checked) { 
    elm.click(); 
    } 
} 

Tìm hiểu thêm về phương pháp nhấp chuột ở đây:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click

Answer 5

Tôi muốn lưu ý rằng thiết lập các thuộc tính 'kiểm tra' thành một chuỗi không trống dẫn đến một hộp kiểm tra.

Vì vậy, nếu bạn đặt thuộc tính 'đã chọn' thành "false", hộp kiểm này sẽ được chọn. Tôi đã phải thiết lập các giá trị cho chuỗi rỗng, rỗng hoặc giá trị boolean sai để đảm bảo hộp kiểm đã không được kiểm tra.

Answer 6

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('.selecctall').click(function (event) { 
      if (this.checked) { 
       $('.checkbox1').each(function() { 
        this.checked = true; 
       }); 
      } else { 
       $('.checkbox1').each(function() { 
        this.checked = false; 
       }); 
      } 
     }); 

    }); 

</script> 

Answer 7

Hãy thử này:

//Check 
document.getElementById('checkbox').setAttribute('checked', 'checked'); 

//UnCheck 
document.getElementById('chk').removeAttribute('checked'); 

Answer 8

function setCheckboxValue(checkbox,value) { 
    if (checkbox.checked!=value) 
     checkbox.click(); 
}