Установить / снять флажок с помощью JavaScript (jQuery или vanilla)?

Ответы:

978

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);
Алекс Питти
источник
Использование .prop не похоже на работу с Jquery 1.11.2 в Firefox с локально размещенными файлами. .attr делает. Я не проверял более полно. Вот код: `` `personContent.find (" [data-name = '"+ pass.name +"'] "). Children ('input'). Attr ('checked', true); `` `
Эндрю Даунс
3
Должны ли мы использовать attrили prop?
Черный
15
Видимо .checked = true/false, не вызывает changeсобытие: - \
лист
1
@albert: почему вы изменили задания на строгие тесты на равенство? Вы сломали ответ.
Мартейн Питерс
вы правы. это мое плохо полностью. извините за это
Альберт
136

Важное поведение, которое еще не было упомянуто:

Программно устанавливая отмеченный атрибут, не срабатывает changeсобытие флажка .

Убедитесь сами в этой скрипке:
http://jsfiddle.net/fjaeger/L9z9t04p/4/

(Fiddle протестирован в Chrome 46, Firefox 41 и IE 11)

click()метод

Однажды вы можете написать код, который зависит от события, которое запускается. Чтобы убедиться, что событие происходит, вызовите click()метод элемента checkbox, например так:

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

Однако это переключает проверенный статус флажка вместо того, чтобы специально установить его в trueили false. Помните, что changeсобытие должно срабатывать только тогда, когда проверяемый атрибут действительно изменяется.

Это также относится к способу jQuery: установка атрибута с помощью propили attrне вызывает changeсобытие.

Установка checkedопределенного значения

Вы можете проверить checkedатрибут перед вызовом click()метода. Пример:

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

Узнайте больше о методе щелчка здесь:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click

sudoqux
источник
8
Это хороший ответ, но лично я предпочел бы запустить событие изменения вместо вызова click () elm.dispatchEvent(new Event('change'));
Виктор Шароватов
@VictorSharovatov Почему вы предпочитаете инициировать событие изменения?
PeterCo
2
Я могу согласиться лишь частично - многие веб-браузеры с AdBlocks защищают DOM от виртуальных нажатий () из-за нежелательных действий со стороны рекламы
pkolawa
2
@PeterCo: Вероятно, потому что это более четко отображает намерение - щелкните элемент, чтобы вызвать событие изменения, а не отправлять событие изменения, чтобы вызвать событие изменения - косвенное (изменение триггеров щелчка) по сравнению с прямым. Последнее значительно яснее и не требует, чтобы читатель знал, что щелчок запускает изменение.
Билл
37

проверить:

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

снять галочку:

document.getElementById("id-of-checkbox").checked = false;
topherg
источник
2
Это только изменит проверенный атрибут. Тем не менее, onclick и подобные события не будут вызваны.
Пол Стелиан,
17

Мы можем установить флажок частиц, как,

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

и снимите флажок,

$('id of the checkbox')[0].checked = false
АКС
источник
1
Вам действительно не нужен индекс массива, если вы выбираете только один элемент. Но я думаю, если вы хотите быть явным. ха-ха
Rizowski
6
@Rizowski Вам нужен индекс для получения нативного html-элемента - у объектов jQuery нет свойства «checked»
Хенрик Кристенсен,
Это сработало для меня. Без индекса массива я получаю неопределенную ошибку. Большое спасибо, спас мой день.
Нери
15

Я хотел бы отметить, что установка атрибута «checked» в непустую строку приводит к появлению флажка.

Таким образом, если вы установите атрибут «флажок» на «ложь» , флажок будет установлен. Мне пришлось установить значение на пустую строку, null или логическое значение false , чтобы убедиться, что флажок не установлен.

Ян Расехорн
источник
5
Это потому, что непустая строка считается истинной.
Джеймс Койл
10

Попробуй это:

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

//UnCheck
document.getElementById('chk').removeAttribute('checked');
Сайед Джамиль Уддин
источник
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
источник
6
function setCheckboxValue(checkbox,value) {
    if (checkbox.checked!=value)
        checkbox.click();
}
Kandi
источник
3

Если по какой - то причине, вы не хотите (или не может) запустить .click()на флажке элемента, вы можете просто изменить его значение непосредственно через его .Checked свойства ( атрибута IDL в <input type="checkbox">).

Обратите внимание, что при этом не запускается обычно связанное событие ( изменение ), поэтому вам нужно вручную запустить его, чтобы получить полное решение, которое работает со всеми связанными обработчиками событий.

Вот функциональный пример в необработанном 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>

Если вы запустите это и нажмете оба флажка и кнопку, вы должны понять, как это работает.

Обратите внимание, что я использовал document.querySelector для краткости / простоты, но его можно легко создать, чтобы либо передать заданный идентификатор конструктору, либо применить его ко всем кнопкам, которые действуют как метки aria для флажка (обратите внимание, что я не удосужился установить идентификатор на кнопке и присвоить флажок aria-labelledby, что должно быть сделано при использовании этого метода) или каким-либо другим способом расширить это. Последние два addEventListenerпросто продемонстрировать, как это работает.

taswyn
источник
2

Для однократной проверки попробуйте

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

для нескольких попыток

Камил Келчевски
источник
2

Я согласен с текущими ответами, но в моем случае это не работает, я надеюсь, что этот код поможет кому-то в будущем:

// check
$('#checkbox_id').click()
Удхав Сарваия
источник