即使通过Javascript代码检查，如何触发复选框单击事件？

Posted 2023-02-22

【中文标题】即使通过Javascript代码检查，如何触发复选框单击事件？

【英文标题】：How to trigger checkbox click event even if it's checked through Javascript code?

【发布时间】：2011-06-14 10:24:19

【问题描述】：

我的页面中有很多复选框，并且有一个选中所有复选框的全选复选框。不知何故，我想模拟复选框的单击事件，即使它是通过全选按钮选中/取消选中的。我该怎么做？

【参考方案1】：

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

例如：

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

【讨论】：

你也可以直接调用$('#foo').click()，它实际上做了同样的事情。

如何用纯 javascript 做到这一点？

出现 trigger('click') 切换当前值。如果您只想设置它然后将checked 设置为 true 然后调用 triggerHandler(...) ***.com/questions/10268222/…

此类帖子在需要使用第 3 方时如何准确标记为正确？他没有要求 jQuery 解决方案。

@Wancieho 问题被标记为“jquery”。

【参考方案2】：

获取检查状态

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

然后进行设置

$("input:checkbox").attr("checked",checked);

【讨论】：

没有用attr 尝试过这个，因为我现在使用prop，但是这个方法只选中了这些框，它不会触发每个之后的点击事件

【参考方案3】：

你也可以使用.change()函数

例如：

$('form input[type=checkbox]').change(function()  console.log('hello') );

【讨论】：

当复选框更改是通过 Javascript 完成时，这对我不起作用。

【参考方案4】：

你也可以用这个，希望你可以为他们服务。

$(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>

【参考方案5】：

没有 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】：

来自 jQuery 的触发函数可能是您的答案。

jQuery docs says: 当相应的事件发生时，任何附加了 .on() 或其快捷方法的事件处理程序都会被触发。但是，可以使用 .trigger() 方法手动触发它们。对 .trigger() 的调用以与用户自然触发事件相同的顺序执行处理程序

因此最好的单行解决方案应该是：

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

//or

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

【参考方案7】：

  $("#gst_show>input").change(function()

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

  );

【讨论】：

你能解释一下你的代码吗