Question

点击checkbox或点击<tr>时，我试图让JavaScript正确执行。但是它似乎执行了两次代码;一次用于checkbox，一次用于<tr>。

现在你可以说＆＃34;为什么不把它放在复选框上并用它完成？＆＃34;如果那么简单，我会做到这一点。但有人要求在点击<tr>或checkbox时触发它。

现在为了增加一些复杂性，当onClick触发时，它会将数据发送回数据中的父节点，以便进行处理，直到更新为止。

子窗口（问题区域）

function FnSearch(urembroid, embroideryID){
  if (document.getElementById("embroid"+embroideryID).checked == false){
                    try {
                            parent.window.EmbroideryDataReturned("add", embroideryID);
                    } catch(e) {
                            window.opener.parent.EmbroideryDataReturned("add", embroideryID);
                    }
                    document.getElementById("embroid"+embroideryID).checked = true;
            } else {
                    try {
                            parent.window.EmbroideryDataReturned("remove", embroideryID);
                    } catch(e) {
                            window.opener.parent.EmbroideryDataReturned("remove", embroideryID);
                    }
                    document.getElementById("embroid"+embroideryID).checked = false;
            }

子窗口HTML - 请注意PHP正在创建和字段。

echo "<tr id='embroideryData' onclick=\"javascript:FnSearch('" . $data['urembroidid'] . "', '".$data['EmbroideryID']."')\">"; // On a <tr> execute the update
    if (OrderKeyExists($data['EmbroideryID'])) {
            echo "<td id='checkbox'><input type='checkbox' id='embroid".$data['EmbroideryID']."' checked='checked'/></td>";
    } else {
            echo "<td id='checkbox'><input type='checkbox' id='embroid".$data['EmbroideryID']."'/></td>";
    }
echo "</tr>\n";

我只需要执行一次此代码。单击<tr>时代码正常工作，但单击checkbox时执行两次。但是，当单击false时，它也会使父窗口中的数组混乱到可能有checkbox数据的位置。调试时，会向onClick发送FnSearch，就像checkbox最初是＆＃34; checked＆＃34;什么时候不是。所以它发送了一个＆＃34; remove＆＃34;到父母，但第二次完成相反。这导致数据完整性。

所以主要问题是：如何让checkbox只执行一次FnSearch？

如果有人有任何意见，那将非常感谢！

Answer 1

有很多方法可以修复它......

（1）这是我修复同一问题的方式...因为我也想要自定义复选框......

您可以使用已选中和未选中框的图片而非复选框，并在tr点击上切换src ...

此外，您向所有checkbox提供了同样的身份td，但这些内容无效...

function toggleRowSelection(row){
   if(row.getElementsByTagName('img')[0].src == "checked.jpg")
       row.getElementsByTagName('img')[0].src = "unchecked.jpg"
   else
       row.getElementsByTagName('img')[0].src = "checked.jpg"
}

HTML（约）

<tr onclick="toggleRowSelection(this)"><td><img src="checked.jpg"></td></tr>
<tr onclick="toggleRowSelection(this)"><td><img src="checked.jpg"></td></tr>

（2）使用event.target获取行中点击的元素，如果是td，请选中/取消选中复选框.....

如果checkbox只是执行您的操作

（3）同时检查 event.preventDefault() 和 event.stopPropagation() ...它可能会对您有所帮助

onClick函数执行两次

1 个答案: