Question

我正在尝试检查/取消选中表格单元格中的复选框/单选按钮以及实际复选框/单选按钮

我在下面的代码中编写了从表格单元格中选择复选框/单选按钮的方法请参考代码笔以获取实际代码。

该代码适用于IE 11浏览器，但不适用于Chrome。如果我选择了表格单元格，则选中该复选框，但是当我检查实际复选框时，没有任何反复操作。

我认为复选框内部调用PropagateBelow方法。

Check/Uncheck check box for chrome(Select on the CHECKBOX itself on TABLE CELL works fine)

<table border="1">
        <tr>
            <td onclick="PropagateBelow(this);" style="width:100px;">
                <input type="checkbox" id="test" value="Test123" />
            </td>
        </tr>

function PropagateBelow(tableCell) {
    alert(tableCell);
    var radioButtons = tableCell.getElementsByTagName('input');
    for (var i = 0; i < radioButtons.length; i++) {
        var radioButton = radioButtons[i];
        if (radioButton != null && radioButton != undefined) {
            if (radioButton.type == 'radio' || radioButton.type == 'checkbox') {
                radioButton.click();
            }
        }
    }
}

Answer 1

不太确定你正在观察到的确切不当行为是什么。当我测试代码时会发生什么，当单击单元格时，会调用PropagateBelow(this)，根据其当前状态激活/取消激活该复选框。当我单击复选框时，勾选复选框，但随后点击事件冒泡，再次触发PropagateBelow(this)，然后再次取消选中该复选框。

如果您想阻止这种情况，您必须在单击复选框时停止事件的传播，例如

<table border="1">
            <tr>
                <td onclick="PropagateBelow(this);" style="width:100px;">
                    <input type="checkbox" id="test" value="Test123" onclick="cancelPropagation();" />
                </td>
            </tr>
</table>

然后按以下方式实施cancelPropagation()

function cancelPropagation(ev){
  var event = ev || window.event;
  event.stopPropagation();
  return false;
}

以下是您修改过的codepen项目：http://codepen.io/anon/pen/MwEpxm

如上所述，我不确定我的意思是什么。如果这没有帮助，请告诉我，所以我会再次删除我的答案：）

Answer 2

您可以将单选按钮包含在占据表格单元格整个空间的标签中，而不是使用JavaScript函数将单击传播到所有单选按钮。在标签中包含单选按钮将允许您单击标签中的任意位置以切换单选按钮，而无需使用任何JavaScript。

请在此处查看示例：http://codepen.io/anon/pen/GJMWzb

<table border="1">
            <tr>
                <td style="width:100px;">
                  <label style="width:100%;height:100%;display:block;">  
                    <input type="checkbox" id="test" value="Test123" />
                  </label>
                </td>
            </tr>
</table>

Answer 3

有趣的是，这对我在Chrome中运行良好，但作为一般规则，最好将checked属性设置为复选框上的true，而不是尝试模拟点击。

这可以通过将radioButton.click();替换为radioButton.checked = true;，或者如果您想切换复选框radioButton.checked = !radioButton.checked;来完成。

https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/checked

无法从Chrome

3 个答案: