用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';
    }

首先使所有其他輸入透明。 然后將您的樣式應用於新樣式。

您也可以像檢查當前輸入一樣檢查其他輸入是否被選中。 如果您使用復選框，那將很有用。