Отметить / снять флажок с помощью JavaScript?

298

Как установить или снять флажок с помощью JavaScript или jQuery?

Теги:

8 ответов

609
Лучший ответ

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);
  • 0
    Использование .prop не похоже на работу с Jquery 1.11.2 в Firefox с локально размещенными файлами. .attr делает. Я не проверял более полно. Вот код: `` `personContent.find (" [data-name = '"+ pass.name +"'] "). Children ('input'). Attr ('checked', true); `` `
  • 3
    Должны ли мы использовать attr или prop ?
Показать ещё 2 комментария
62

Важное поведение, о котором еще не упоминалось:

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

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

(Fiddle тестируется в Chrome 46, Firefox 41 и IE 11)

Метод click()

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

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

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

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

Настройка checked на определенное значение

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

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

Подробнее о методе click читайте здесь:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click

  • 6
    Это хороший ответ, но лично я предпочел бы запустить событие change вместо вызова click () elm.dispatchEvent(new Event('change'));
  • 0
    @VictorSharovatov Почему вы предпочитаете инициировать событие изменения?
Показать ещё 2 комментария
24

чтобы проверить:

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

чтобы снять флажок:

document.getElementById("id of checkbox").checked = false;
  • 0
    Это только изменит проверенный атрибут. Тем не менее, onclick и подобные события не будут вызваны.
6

Мы можем проверить флажок в виде частиц, как

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

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

$('id of the checkbox')[0].checked = false
  • 1
    Вам действительно не нужен индекс массива, если вы выбираете только один элемент. Но я думаю, если вы хотите быть явным. ха-ха
  • 5
    @Rizowski Вам нужен индекс, чтобы получить нативный элемент html - у объектов jQuery нет свойства «флажок»
Показать ещё 2 комментария
5

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

Итак, если вы установите для атрибута 'checked' значение "false" , этот флажок будет установлен. Мне нужно было установить значение в пустую строку null или логическое значение false, чтобы убедиться, что флажок не установлен.

  • 3
    Это потому, что непустая строка считается истинной.
2

Попробуйте следующее:

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

//UnCheck
document.getElementById('chk').removeAttribute('checked');
2
<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>
0
function setCheckboxValue(checkbox,value) {
    if (checkbox.checked!=value)
        checkbox.click();
}

Ещё вопросы

Сообщество Overcoder
Наверх
Меню