Zaznacz/odznacz pole wyboru za pomocą JavaScript

Jak można zaznaczać/odznaczać pole za pomocą JavaScript?

Author: John, 2011-11-21

12 answers

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);
 1088
Author: Alex Peattie,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-09-18 17:00:33

Ważne zachowanie, które nie zostało jeszcze wymienione:

Programowo ustawienie atrybutu checked nie uruchamia zdarzenia change pola wyboru .

Zobacz na własne oczy w tym Skrzypku:
http://jsfiddle.net/fjaeger/L9z9t04p/4/

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

The click() metoda

Pewnego dnia może się okazać, że piszesz kod, który polega na strzelaninie. Aby upewnić się, że zdarzenie zostanie wywołane, wywołaj metodę click() elementu checkbox, w następujący sposób:

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

To jednak przełącza stan zaznaczonego pola wyboru, zamiast ustawiać go na true lub false. Pamiętaj, że zdarzenie change powinno zostać wywołane tylko wtedy, gdy atrybut checked rzeczywiście się zmienia.

dotyczy to również sposobu jQuery: ustawienie atrybutu za pomocą prop lub attr, nie uruchamia zdarzenia change.

Ustawienie checked do określonej wartości

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

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

Więcej o metodzie kliknij tutaj:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click

 154
Author: sudoqux,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-10-30 10:05:48

Do sprawdzenia:

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

Aby odznaczyć:

document.getElementById("id-of-checkbox").checked = false;
 37
Author: topherg,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-01-30 20:10:44

Możemy sprawdzić pole wyboru cząstek jako,

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

I odznacz przez,

$('id of the checkbox')[0].checked = false
 17
Author: AKS,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-04-09 06:25:43

Chciałbym zauważyć, że ustawienie atrybutu 'checked' na niepusty łańcuch prowadzi do pola wyboru.

Więc jeśli ustawisz atrybut 'checked' na "fałsz", pole wyboru zostanie zaznaczone. Musiałem ustawić wartość na pusty łańcuch, null lub wartość logiczna fałsz aby upewnić się, że pole wyboru nie zostało zaznaczone.

 15
Author: Jan Rasehorn,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-11-16 17:08:34

Try This:

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

//UnCheck
document.getElementById('chk').removeAttribute('checked');
 11
Author: Syed Jamil Uddin,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-03-04 12:16:28
function setCheckboxValue(checkbox,value) {
    if (checkbox.checked!=value)
        checkbox.click();
}
 7
Author: kandi,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-08-24 12:40:27
<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>
 6
Author: M.Owais,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-03-04 11:40:25

Jeśli z jakiegoś powodu nie chcesz (lub nie możesz) uruchomić .click() na elemencie checkbox możesz po prostu zmienić jego wartość bezpośrednio za pomocą its .sprawdzona właściwość (atrybut IDL z <input type="checkbox">).

Zauważ , że w ten sposób nie wystrzelisz normalnie powiązanego zdarzenia (change), więc musisz ręcznie go uruchomić, aby mieć kompletne rozwiązanie, które działa z wszystkimi powiązanymi procesami obsługi zdarzeń.

Oto przykład funkcjonalny 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ś wiedzieć, jak to działa.

Zauważ, że użyłem dokumentu.querySelector dla zwięzłości/prostoty, ale to może być łatwo zbudowane albo aby dany ID został przekazany do konstruktora, albo może zastosować się do wszystkich przycisków, które działają jako Aria-labels dla checkboxa (zauważ, że nie zawracałem sobie głowy ustawieniem id na przycisku i nadaniem checkboxowi Aria-labelledby, co należy zrobić, jeśli za pomocą tej metody) lub dowolną liczbę innych sposobów, aby to rozwinąć. Ostatnie dwa addEventListener s mają na celu pokazanie, jak to działa.

 3
Author: taswyn,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-06-27 17:56:21

Dla pojedynczej próby kontrolnej

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

Dla wielu prób

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>
 3
Author: Kamil Kiełczewski,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-12-27 22:23:42

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

// check
$('#checkbox_id').click()
 3
Author: Udhav Sarvaiya,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-02-25 07:56:26

Vanilla (PHP) zaznacza pole włączania i wyłączania oraz zapisuje wynik.

<?php
    if($serverVariable=="checked") 
        $checked = "checked";
    else
        $checked = "";
?>
<input type="checkbox"  name="deadline" value="yes" <?= $checked 
?> >

# on server
<?php
        if(isset($_POST['deadline']) and
             $_POST['deadline']=='yes')
             $serverVariable = checked;    
        else
             $serverVariable = "";  
?>
 -1
Author: gavstar,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-08-25 13:29:57