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

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

Mooseman
Редактировал вопрос 21-го апреля 2019 в 10:49
Программирование
javascript jquery
21-го ноября 2011 в 2:12
49 просмотров
Комментарии к вопросу (1)
Решение

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);
Martijn Pieters
Редактировал ответ 18-го сентября 2019 в 5:00
Комментарии (6)

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

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

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

(Скрипка тестируется в Chrome 46, браузер Firefox 41 и IE 11)

В нажмите кнопку() метод

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

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

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

Это также относится к jQuery и способ: Установка атрибута, используя опора или М, не срабатывает событие "изменить".

Параметр "проверка" конкретное значение

Вы можете проверить "проверка" атрибут, до вызова нажмите()` метод. Пример:

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

Комментарии (4)

проверить:

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

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

document.getElementById("id-of-checkbox").checked = false;
jtheletter
Редактировал ответ 30-го января 2018 в 8:10
Комментарии (1)

Мы можем проверить частицу checkbox как,

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

и снять флажок по ,

$('id of the checkbox')[0].checked = false
Amit Joki
Редактировал ответ 9-го апреля 2015 в 6:25
Комментарии (4)

Хотелось бы отметить, что установка 'проверено' атрибут непустая строка наводит на клетчатом поле.

Так что если вы выберите 'проверено' атрибутов для на"ложные" по, флажок будет проверен. Мне пришлось установить значение в пустую строку, нуль или булево значение ложь для того, чтобы убедиться, что флажок Не проверять.

Jan Rasehorn
Редактировал ответ 16-го ноября 2015 в 5:08
Комментарии (1)

Попробуйте Этот:

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

//UnCheck
document.getElementById('chk').removeAttribute('checked');
Комментарии (0)
 
<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();
}
Комментарии (0)

Если по каким-то причинам вы не'т хотите (или можете'т) выполнять .нажмите кнопку() на элементе флажок, вы можете просто изменить его значение напрямую через его .проверено недвижимости (ИДЛ атрибут в в<тип входного=и"флажок" и>).

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

Здесь'ы функциональной примеру в RAW на 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" />

Change the checkbox!

<div class="checkboxfeedback">No changes yet!</div>

в

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

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

taswyn
Редактировал ответ 27-го июня 2018 в 5:56
Комментарии (0)