Làm thế nào một hộp kiểm có thể được kiểm tra / bỏ chọn bằng JavaScript, jQuery hoặc vanilla?

Javascript:

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

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

jQuery (1.6+):

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

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

jQuery (1.5-):

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

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

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

Lập trình thiết lập thuộc tính được kiểm tra , không kích hoạt changesự kiện 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 trên sự kiện bị sa thải. Để đảm bảo sự kiện kích hoạt, hãy gọi click()phương thức của phần tử hộp kiểm, như sau:

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

Tuy nhiên, điều này bật tắt trạng thái đã chọn của hộp kiểm, thay vì đặt cụ thể thành truehoặc false. Hãy nhớ rằng changesự kiện chỉ nên kích hoạt, khi thuộc tính được kiểm tra thực sự thay đổi.

Nó cũng áp dụng cho cách jQuery: thiết lập thuộc tính bằng cách sử dụng prophoặc attrkhông kích hoạt changesự kiện.

Đặt checkedthành một giá trị cụ thể

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

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

Đọc thêm về phương pháp nhấp tại đây:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLEuity/click

để kiểm tra:

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

để bỏ chọn:

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

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

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

và bỏ chọn bởi,

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

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

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

Thử cái này:

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

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

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

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

Nếu, vì một số lý do, bạn không muốn (hoặc không thể) chạy .click()phần tử hộp kiểm, bạn chỉ cần thay đổi trực tiếp giá trị của nó thông qua thuộc tính .checked ( thuộc tính IDL của nó <input type="checkbox">).

Lưu ý rằng làm như vậy không kích hoạt sự kiện ( thay đổi ) thông thường, vì vậy bạn sẽ cần phải kích hoạt thủ công để có giải pháp hoàn chỉnh hoạt động với bất kỳ trình xử lý sự kiện liên quan nào.

Đây là một ví dụ chức năng trong javascript thô (ES6):

class ButtonCheck {
  constructor() {
    let ourCheckBox = null;
    this.ourCheckBox = document.querySelector('#checkboxID');

    let checkBoxButton = null;
    this.checkBoxButton = document.querySelector('#checkboxID+button[aria-label="checkboxID"]');

    let checkEvent = new Event('change');
    
    this.checkBoxButton.addEventListener('click', function() {
      let checkBox = this.ourCheckBox;

      //toggle the checkbox: invert its state!
      checkBox.checked = !checkBox.checked;

      //let other things know the checkbox changed
      checkBox.dispatchEvent(checkEvent);
    }.bind(this), true);

    this.eventHandler = function(e) {
      document.querySelector('.checkboxfeedback').insertAdjacentHTML('beforeend', '<br />Event occurred on checkbox! Type: ' + e.type + ' checkbox state now: ' + this.ourCheckBox.checked);

    }


    //demonstration: we will see change events regardless of whether the checkbox is clicked or the button

    this.ourCheckBox.addEventListener('change', function(e) {
      this.eventHandler(e);
    }.bind(this), true);

    //demonstration: if we bind a click handler only to the checkbox, we only see clicks from the checkbox

    this.ourCheckBox.addEventListener('click', function(e) {
      this.eventHandler(e);
    }.bind(this), true);


  }
}

var init = function() {
  const checkIt = new ButtonCheck();
}

if (document.readyState != 'loading') {
  init;
} else {
  document.addEventListener('DOMContentLoaded', init);
}

<input type="checkbox" id="checkboxID" />

<button aria-label="checkboxID">Change the checkbox!</button>

<div class="checkboxfeedback">No changes yet!</div>

Nếu bạn chạy nó và nhấp vào cả hộp kiểm và nút, bạn sẽ hiểu được cách thức hoạt động của nó.

Lưu ý rằng tôi đã sử dụng document.querySelector để đơn giản / đơn giản, nhưng điều này có thể dễ dàng được xây dựng để có một ID nhất định được chuyển đến hàm tạo hoặc nó có thể áp dụng cho tất cả các nút đóng vai trò là nhãn aria cho hộp kiểm (lưu ý rằng tôi đã không bận tâm đến việc đặt id trên nút và đặt hộp kiểm một aria-labellingby, điều này nên được thực hiện nếu sử dụng phương pháp này) hoặc bất kỳ cách nào khác để mở rộng điều này. Hai addEventListenergiây cuối chỉ là để giới thiệu cách nó hoạt động.

Để kiểm tra một lần

myCheckBox.checked=1

<input type="checkbox" id="myCheckBox"> Call to her

cho nhiều thử

document.querySelectorAll('.imChecked').forEach(c=> c.checked=1)

Buy wine: <input type="checkbox" class="imChecked"><br>
Play smooth-jazz music: <input type="checkbox"><br>
Shave: <input type="checkbox" class="imChecked"><br>

Tôi đồng ý với các câu trả lời hiện tại, nhưng trong trường hợp của tôi nó không hoạt động, tôi hy vọng mã này sẽ giúp được ai đó trong tương lai:

// check
$('#checkbox_id').click()