即使通过Javascript代码检查,如何触发复选框点击事件?


80

我的页面上有很多复选框,并且有一个全选复选框,用于选中所有复选框。我想以某种方式模仿复选框的单击事件,即使通过全选按钮选中/取消选中该复选框也是如此。我该怎么做?

Answers:


116

您可以使用jQuery.trigger()方法。参见http://api.jquery.com/trigger/

例如:

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

13
您也可以只调用$('#foo').click(),这实际上可以完成相同的操作。
凯文·巴布科克

2
如何使用纯JavaScript做到这一点?
Paul

6
出现trigger('click')会切换当前值。如果只想将其设置checked为true,则调用triggerHandler(...)stackoverflow.com/questions/10268222/…–
rogerdpack

1
当此类帖子要求使用第三者时,它们如何准确地标记为正确?他没有要求使用jQuery解决方案。
Wancieho,

@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') });

通过Javascript更改复选框后,这对我不起作用。
Flimm

6

没有gQuery

document.getElementById('your_box')。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 docs说: 发生相应事件时,将触发任何附加有.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
您能解释您的
Yilmaz,
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.