javascript - 使用 JS 高亮单选按钮

Question

这是我的单选按钮：

<label>
  <input type="radio" id="chk1" name="chooseSupp" onclick="change(this);">
    Chosen Supplier
</label>

这是我突出显示单元格的Javascript：

<script type="text/javascript">
  function change(obj) {
    var tr=obj.parentNode.parentNode;
    tr.style.backgroundColor=(obj.checked)? 'red' : 'transparent';
  }
</script>

问题是，当我单击一个单选按钮时，它会突出显示，但是当我单击另一个单选按钮时，它也会突出显示，但第一个按钮上的突出显示并没有消失。

我的单选按钮处于循环状态，不确定这是否与任何可能的解决方案相关。

有任何想法吗？

Answer 1

    function change(obj) {
      var tr=obj.parentNode.parentNode.parentNode;
      var tbl = tr.parentNode;
      var inputs = tbl.getElementsByTagName("input");
      for(var i = 0;i<inputs.length;i++)
          inputs[i].parentNode.parentNode.parentNode.style.backgroundColor='transparent';
      tr.style.backgroundColor=(obj.checked)? 'red' : 'transparent';
    }

首先使所有其他输入透明。然后将您的样式应用于新样式。

您也可以检查是否检查了其他输入，就像您检查当前输入一样。如果您使用复选框，那将很有用。