仅在使用书签在 chrome 中触发复选框 onchange 事件

Triggering checkbox onchange event in chrome using bookmarklet only

本文关键字：复选框 事件 onchange chrome 书签      更新时间：2023-09-26
<tr phrase_id="1" class="altRow">   
  <td style="padding:3px; vertical-align:top;"><input type="checkbox" value="1"></td>
  <td class="phraseCode" style="padding:3px; vertical-align:top;">
    EUH 201/201A
  </td>
  <td class="phraseText" style="padding:3px; vertical-align:top;">
     Contains lead. Should not be used on surfaces liable to be chewed or sucked by children. Warning! Contains lead.
  </td>
</tr>

上面的代码是从 chrome 中使用 F12 的网页中提取的。在上面的代码中，有一个checkbox单击时会使整行变黄。所以我做了一个书签，它会检查checkbox，但它没有使行变黄。

爪哇语

(function(){
  var s = document.getElementsByClassName("phraseCode");
  for (i=0;i<s.length;i++) {
    if(s[i].innerText=="EUH 201/201A") {
      elm=s[i].parentNode.getElementsByTagName("input")[0];
      elm.checked=true;break;
    }
  }
})();

我尝试使用elm.onchange()，但没有结果。我用typeof()来获取它返回object而不是function的onchange事件的类型，为什么？再次介绍如何触发关联的onchange事件。请用编码解释我。我是javascript的新手。所以请帮忙。

尝试使用 elm.onclick() 触发点击事件。完整的书签代码(稍微优化(将变为：

(function () {
    var s = document.querySelectorAll(".phraseCode");
    for (var i = 0; i < s.length; i++) {
        if (s[i].innerText == "EUH 201/201A") {
            var elm = s[i].parentNode.querySelector("input");
            elm.checked = true;
            elm.onclick();
            break;
        }
    }
})();

由于elm.onchange不适用于您的案例，因此很可能在复选框上设置了单击事件切换效果。另外，如果您想知道为什么typeof elm.onchange是一个对象，这是因为没有绑定 onchange 事件，然后elm.onchange null，typeof为此返回object。

如果使用addEventListener绑定事件，则可能需要创建一个事件并手动调度它，如此示例 http://jsfiddle.net/mx1o3579/所示。

<table border="1">
 <tr  class="altRow">   
     <td style="padding:3px; vertical-align:top;">
     <input type="checkbox" value="1" class="chbox"></td>
     <td class="phraseCode" style="padding:3px; vertical-align:top;">EUH 201/201A</td>
      <td class="phraseText" style="padding:3px; vertical-align:top;">Contains lead. Should not be used on surfaces liable to be chewed or sucked by children. Warning! Contains lead.</td>
 </tr>
 </table>
<style>
.selected
{
background-color:yellow;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(".altRow").click(function()
{
    alert('ddd');
  $(this).addClass('selected');
});
</script>

您可以使用以下代码：

<style>
.selected
{
    background-color:yellow;
}
</style>
<script src="http://code.jquery.com/jquery-2.0.2.js"></script>
<script>
$(".chbox").click(function()
{
    $(".altRow").toggleClass('selected');
});
</script>

在当前代码中，控件未进入 for 循环。如果打印变量"s"的长度，则为 0。我建议你使用'getElementById'。

如果你可以使用jquery，那么看看.trigger((文档在这里。使用 jquery，您可以触发这样的事件

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

希望对您有所帮助。

你可以用普通的javascript
尝试这个工作小提琴
http://jsfiddle.net/mrk_m/jvhogyna/3/它在元素上注册事件处理程序。

// create inbuilt event var event = new MouseEvent('click', { 'view': window, 'bubbles': true, 'cancelable': true })
// In loop register handler to change color. and then simulate event for ( i = 0; i < s.length; i++) { console.log(s[i]); if (s[i].innerHTML == "EUH 201/201A") { elm = s[i].parentNode.getElementsByTagName("input")[0]; elm.onchange = changeBgColor; // dispatch click event elm.dispatchEvent(event); break; } }
// Handler that changes color of entire row function changeBgColor (e) { if (!e.target.checked) { rowEle.style.backgroundColor = 'white'; } else { rowEle.style.backgroundColor = 'yellow'; } e.preventDefault(); e.stopPropagation(); } 您可以从 js 或 css 中为 altRow 设置背景颜色。如果你想使用 css，你仍然需要在事件处理程序中从 js 更改一些类。 此外，您必须包装内部才能执行 for 循环。

相关文章：