javascript - 如何使用单选按钮更改 <td> 的颜色？

Question

如何更改 <td> 的颜色基于单选按钮值的元素？我想设置<td bgcolor></td>如果单选按钮被选中“否”，则为红色；如果单选按钮被选中“确定”，则为绿色。

function color(){
  if(radio1.checked()){
    td1.bgcolor="green";
  }
  if(radio2.checked()){
    td1.bgcolor="red";
  }
}

<table>
  <tr>
    <td bgcolor="#B35556">
      <form action="">
        OK <input type="radio" name="radio1" id="radio1"value="OK" checked="color()"/> <BR>
        NO  <input type="radio" name="radio2" id="radio2"value="NO"/>                
      </form>
    </td>
  </tr>
</table>

我知道这段代码是非常错误的，但这是一个让您理解我的问题的示例

Answer 1

几点:

1. 使用 name 属性将单选按钮定义为同一组的一部分(具有相同名称的单选按钮属于同一组)。

2. 将函数附加到两个单选按钮的 onchage 事件。

3. 您必须使用元素的 style 属性来设置 backgroundColor。

尝试以下方法:

function color(el){
  if(el.value=="OK"){
    el.parentNode.parentNode.style.backgroundColor="green";
  }
  else{
    el.parentNode.parentNode.style.backgroundColor="red";
  }
 }

<table>
  <tr>
    <td bgcolor="#B35556">
      <form action="">

        OK <input type="radio" name="radio" id="radio1"value="OK" onchange="color(this)"/> <BR>
        NO <input type="radio" name="radio" id="radio2"value="NO" onchange="color(this)" checked/>

      </form>
    </td>
  </tr>
</table>