时间戳

首页 > 解决方案 > 如何以编程方式发送复选框单击？

javascript - 如何以编程方式发送复选框单击？

问题描述

我在这里和那里尝试了几个 javascript 函数，但似乎没有一个对我有用。我正在做的是展示一个塔，它有用户希望的多个阶段。这基本上是使用 Js 为每个阶段创建 HTML 标签，最后一个是复选框。我想做的事情是，当我单击一个复选框时，该复选框上方的所有其他复选框也会以编程方式进行检查。所以这就是我所做的：

    let event = new Event('click');

    //Here, q is the maximum stage that the user set.

    document.addEventListener('click', function(e) {
        let readStr = e.target.id;
        if (readStr.startsWith("checkboxFan") && e.isTrusted) {
            for (let r=parseFloat(readStr.substr(-1))+1; r<=q; r++) {
                document.getElementById("checkboxFan"+r).dispatchEvent(event);
            }
        }
    }, false);

它可以很好地找到 ID 并执行我想要的操作，但是 dispatchEvent 没有按预期工作。事实上，它根本不起作用。此外，“click()”功能有效，但 isTrusted 被触发，这不是我想要的，因为必须由用户单击复选框。

有什么解决办法吗？

标签： javascriptcheckboxdispatchevent

解决方案

我已经根据您的描述编写了一些代码。
https://stackblitz.com/edit/js-poevax?file=index.js

document.addEventListener(
  "click",
  function(e) {
    let readStr = e.target.id;
    if (readStr.startsWith("checkboxFan") && e.target.checked) {
      for (let r = parseFloat(readStr.substr(-1)) + 1; r <= q; r++) {
        document.getElementById("checkboxFan" + r).checked = true;
      }
    }
  },
  false
);

你应该检查这个页面。
输入复选框选中属性

干杯！

推荐阅读