Как вызвать событие щелчка флажка, даже если оно проверено через код Javascript?

80

У меня много флажков на моей странице, и есть флажок "Выбрать все", который проверяет все флажки. Как-то я хочу подражать этому событию щелчка флажка, даже если он отмечен / не отмечен с помощью кнопки выбора всех. Как мне это сделать?

javascript jquery checkbox dom-events Джишну А.П.
источник

Ответы:

117

Вы можете использовать .trigger()метод jQuery . См. Http://api.jquery.com/trigger/

Например:

$('#foo').trigger('click');
Марк Робинсон
источник
13
Вы также можете просто позвонить $('#foo').click(), что фактически делает то же самое.
Кевин Бэбкок
2
Как это сделать с помощью чистого JavaScript?
Пол
6
появляется trigger('click')переключает текущее значение. Если вы хотите просто установить его, установите checkedзначение true, тогда вызовите triggerHandler (...) stackoverflow.com/questions/10268222/…
rogerdpack
1
Как именно такие сообщения помечаются как правильные, если для них требуется стороннее использование? Он не просил решения jQuery.
Вансьехо,
@Wancieho Вопрос помечен как jquery.
Марк Робинсон
15

Получение статуса чека

var checked = $("#selectall").is(":checked");

Затем для установки

$("input:checkbox").attr("checked",checked);
Хариш
источник
9
Не пробовал, attrкак я использую propсейчас, но этот метод только устанавливает флажки, он не
запускает
9

Вы .change()тоже можете использовать функцию

Например:

$('form input[type=checkbox]').change(function() { console.log('hello') });
Silviomoreto
источник
У меня это не работает, когда изменение флажка выполняется через Javascript.
Flimm
6

нет gQuery

document.getElementById ('ваш_бокс'). onclick ();

Я использовал определенный класс для своих флажков.

var x = document.getElementsByClassName("box_class");
var i;
for (i = 0; i < x.length; i++) {
    if(x[i].checked) x[i].checked = false;
    else x[i].checked = true;
    x[i].onclick();
   }
Хариджс Крутайнис
источник
6

Вы также можете использовать это, я надеюсь, вы сможете им помочь.

$(function(){
  $('#elements input[type="checkbox"]').prop("checked", true).trigger("change");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<div id="elements">
  <input type="checkbox" id="item-1" value="1"> Item 1 <br />
  <input type="checkbox" id="item-2" value="2" disabled> Item 2 <br /> 
  <input type="checkbox" id="item-3" value="3" disabled> Item 3 <br />
  <input type="checkbox" id="item-4" value="4" disabled> Item 4 <br />
  <input type="checkbox" id="item-5" value="5"> Item 5
</div>
Развернуть фрагмент

Обучение и обмен
источник
4

Вашим ответом может быть функция триггера из jQuery.

В документации jQuery говорится: Любые обработчики событий, прикрепленные с помощью .on () или одного из его методов ярлыка, запускаются при возникновении соответствующего события. Однако их можно запустить вручную с помощью метода .trigger (). Вызов .trigger () выполняет обработчики в том же порядке, в котором они были бы, если бы событие было инициировано пользователем естественным образом.

Таким образом, лучшим однострочным решением должно быть:

$('.selector_class').trigger('click');

//or

$('#foo').click();

источник
1 
  $("#gst_show>input").change(function(){

    var checked = $(this).is(":checked");
    if($("#gst_show>input:checkbox").attr("checked",checked)){
      alert('Checked Successfully');
    }

  });
Радж Шекхар
источник
2
МОЖЕТЕ ОБЪЯСНИТЬ СВОЙ КОД
Йылмаз