JavaScript, jQuery veya vanilya kullanılarak bir onay kutusu nasıl işaretlenebilir / işaretsiz hale getirilebilir?

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

Henüz belirtilmeyen önemli davranışlar:

İşaretli özniteliğin programlı olarak ayarlanması change, onay kutusunun olayını tetiklemez .

Bu kemanda kendiniz görün:
http://jsfiddle.net/fjaeger/L9z9t04p/4/

(Chrome 46, Firefox 41 ve IE 11'de keman test edildi)

click()yöntem

Bir gün kendinizi, tetiklenmekte olan olaya dayanan bir kod yazarken bulabilirsiniz. Etkinliğin tetiklendiğinden emin olmak için click(), onay kutusu öğesinin yöntemini şu şekilde çağırın :

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

Ancak, bu, onay kutusunun işaretli durumunu, özellikle trueveya olarak ayarlamak yerine değiştirir false. changeEtkinliğin yalnızca işaretli özellik gerçekten değiştiğinde tetiklenmesi gerektiğini unutmayın .

Kullanarak niteliğinin kurulması: Ayrıca jQuery şekilde uygulanır propya da attrpatlamıyor, changeolayı.

checkedBelirli bir değere ayarlama

Yöntemi checkedçağırmadan önce özniteliği test edebilirsiniz click(). Misal:

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

Tıklama yöntemi hakkında daha fazla bilgiyi buradan edinebilirsiniz:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click

kontrol etmek:

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

işaretini kaldırmak için:

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

Bir partikül onay kutusunu işaretleyebiliriz,

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

ve işaretini kaldırın,

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

Boş bir dizeye 'işaretli' özniteliği ayarlamanın işaretli bir kutuya götürdüğünü belirtmek isterim.

Dolayısıyla, "işaretli" özniteliği "yanlış" olarak ayarlarsanız , onay kutusu işaretlenir. Onay kutusunun işaretli olmadığından emin olmak için değeri boş dize, null veya boolean değeri false olarak ayarlamak zorunda kaldım .

Bunu dene:

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

Bazı nedenlerden dolayı, istemiyorum (veya olamaz) bir çalıştırırsanız .click()onay kutusu elemanı üzerinde, sadece kendi .checked özelliği (bir üzerinden doğrudan değerini değiştirebilir IDL niteliği arasında <input type="checkbox">).

Not (Bunu yaparken, normalde ilgili olayı olmadığını değişiklik eksiksiz bir çözümü var elle ateş gerekir böylece) o ilgili herhangi bir olay işleyicileri ile çalışır.

İşte ham javascript (ES6) fonksiyonel bir örnek:

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>

Bunu çalıştırırsanız ve hem onay kutusunu hem de düğmesini tıklarsanız, bunun nasıl çalıştığını anlamanız gerekir.

Özgünlük / basitlik için document.querySelector kullandığımı unutmayın, ancak bu, yapıcıya verilen belirli bir kimliğe sahip olacak şekilde kolayca oluşturulabilir veya bir onay kutusu için aria etiketi görevi gören tüm düğmelere uygulanabilir ( düğme üzerinde bir kimlik belirleme ve onay kutusuna aria-labelledby verme zahmetine girmedi; Son ikisi addEventListenersadece nasıl çalıştığını göstermek için.

Tek kontrol için deneyin

myCheckBox.checked=1

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

çoklu deneme için

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>

Mevcut cevaplara katılıyorum, ancak benim durumumda çalışmıyor, umarım bu kod gelecekte birine yardımcı olur:

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