Zaznacz / Odznacz pole wyboru za pomocą JavaScript (jQuery lub wanilia)?

Odpowiedzi:

975

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);
Alex Peattie
źródło
Wydaje się, że używanie .prop nie działa z Jquery 1.11.2 w Firefox z lokalnie hostowanymi plikami. .attr robi. Nie testowałem pełniej. Oto kod: `` `personContent.find (" [data-name = '"+ pass.name +"'] "). Children ('input'). Attr ('zaznaczone', true); ``
Andrew Downes
3
Czy powinniśmy raczej użyć attrlub prop?
Czarny
15
Najwyraźniej .checked = true/falsenie wyzwala changezdarzenia: - \
leaf
1
@albert: dlaczego zmieniłeś zadania na ścisłe testy równości? Złamałeś odpowiedź.
Martijn Pieters
masz rację. to całkowicie moje złe. przepraszam za to
Albert,
136

Ważne zachowanie, o którym jeszcze nie wspomniano:

Programowe ustawienie zaznaczonego atrybutu nie uruchamia changezdarzenia pola wyboru .

Przekonaj się w tym skrzypcach:
http://jsfiddle.net/fjaeger/L9z9t04p/4/

(Fiddle przetestowany w Chrome 46, Firefox 41 i IE 11)

click()metoda

Pewnego dnia może się okazać, że piszesz kod, który zależy od odpalonego zdarzenia. Aby mieć pewność, że zdarzenie zostanie uruchomione, wywołaj click()metodę elementu checkbox, tak jak poniżej:

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

Zmienia to jednak status zaznaczonego pola wyboru, zamiast ustawiania go na truelub false. Pamiętaj, że changezdarzenie powinno zostać uruchomione tylko wtedy, gdy zaznaczony atrybut faktycznie się zmieni.

Dotyczy to również sposobu jQuery: ustawienie atrybutu za pomocą proplub attrnie powoduje uruchomienia changezdarzenia.

Ustawienie checkedokreślonej wartości

Możesz przetestować checkedatrybut przed wywołaniem click()metody. Przykład:

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

Przeczytaj więcej na temat metody kliknięcia tutaj:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click

sudoqux
źródło
8
To dobra odpowiedź, ale osobiście wolałbym uruchomić zdarzenie zmiany zamiast wywoływać click () elm.dispatchEvent(new Event('change'));
Victor Sharovatov,
@VictorSharovatov Dlaczego wolisz uruchomić wydarzenie zmiany?
PeterCo,
2
Zgadzam się tylko częściowo - wiele przeglądarek internetowych z AdBlocks broni DOM przed wirtualnym klikaniem () z powodu niepożądanych działań reklam
pkolawa,
2
@PeterCo: Prawdopodobnie dlatego, że wyraźniej przedstawia cel - kliknij element, aby wywołać zdarzenie zmiany, a następnie wyślij zdarzenie zmiany, aby wywołać zdarzenie zmiany - pośrednie (kliknięcie powoduje zmianę) w porównaniu z bezpośrednim. To ostatnie jest znacznie wyraźniejsze i nie wymaga od czytelnika wiedzy, że kliknięcie powoduje zmianę.
Bill Dagg
37

sprawdzić:

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

odznacz:

document.getElementById("id-of-checkbox").checked = false;
topherg
źródło
2
To zmieni tylko zaznaczony atrybut. Jednak zdarzenia onclick i podobne nie zostaną uruchomione.
Paul Stelian
16

Możemy zaznaczyć pole wyboru cząstek stałych, ponieważ,

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

i odznacz,

$('id of the checkbox')[0].checked = false
AKS
źródło
1
Naprawdę nie potrzebujesz indeksu tablicy, jeśli wybierasz tylko jeden element. Ale myślę, że jeśli chcesz być wyraźny. haha
Rizowski
6
@Rizowski Potrzebujesz indeksu, aby uzyskać natywny element HTML - Obiekty jQuery nie mają właściwości „sprawdzonej”
Henrik Christensen
To zadziałało dla mnie. Bez indeksu tablicy pojawiał się niezdefiniowany błąd. Dziękuję bardzo, uratowałem mój dzień.
Neri
15

Chciałbym zauważyć, że ustawienie atrybutu „zaznaczone” na niepusty ciąg prowadzi do zaznaczenia pola wyboru.

Jeśli więc ustawisz atrybut „zaznaczony” na „false” , pole wyboru zostanie zaznaczone. Musiałem ustawić wartość na pusty ciąg, null lub wartość logiczną false , aby upewnić się, że pole wyboru nie jest zaznaczone.

Jan Rasehorn
źródło
5
Wynika to z faktu, że niepusty ciąg znaków jest uważany za prawdziwy.
James Coyle,
10

Spróbuj tego:

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

//UnCheck
document.getElementById('chk').removeAttribute('checked');
Syed Jamil Uddin
źródło
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>
M.Owais
źródło
6
function setCheckboxValue(checkbox,value) {
    if (checkbox.checked!=value)
        checkbox.click();
}
kandi
źródło
3

Jeśli z jakiegoś powodu, nie chcą (lub nie mogą) uruchomić .click()na elemencie checkbox, można po prostu zmienić jego wartość bezpośrednio poprzez jego właściwości .checked (AN atrybutu IDL z <input type="checkbox">).

Pamiętaj, że zrobienie tego nie powoduje uruchomienia normalnie powiązanego zdarzenia ( zmiany ), dlatego musisz ręcznie uruchomić to, aby uzyskać kompletne rozwiązanie, które działa z powiązanymi programami obsługi zdarzeń.

Oto funkcjonalny przykład w surowym javascript (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>

Jeśli uruchomisz to i klikniesz zarówno pole wyboru, jak i przycisk, powinieneś dowiedzieć się, jak to działa.

Zauważ, że użyłem document.querySelector dla zwięzłości / prostoty, ale można to łatwo zbudować tak, aby albo miał dany identyfikator przekazany do konstruktora, albo może mieć zastosowanie do wszystkich przycisków, które działają jak etykiety aria dla pola wyboru (zwróć uwagę, że I nie zawracałem sobie głowy ustawieniem identyfikatora na przycisku i nadaniem temu polu wyboru arii-labelledby, co powinno być zrobione, jeśli używasz tej metody) lub na wiele innych sposobów, aby to rozwinąć. Dwa ostatnie addEventListenermają tylko pokazać, jak to działa.

taswyn
źródło
2

Spróbuj pojedynczej kontroli

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

dla wielu prób

Kamil Kiełczewski
źródło
2

Zgadzam się z aktualnymi odpowiedziami, ale w moim przypadku nie działa, mam nadzieję, że ten kod pomoże komuś w przyszłości:

// check
$('#checkbox_id').click()
Udhav Sarvaiya
źródło