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

【问题标题】：How can I change Color of a <td> with a radio button?如何使用单选按钮更改 <td> 的颜色？
【发布时间】：2018-09-06 14:39:42
【问题描述】：

如何根据单选按钮的值更改<td> 元素的颜色？如果单选按钮选中“否”，我想将<td bgcolor></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>

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

【问题讨论】：

单选按钮是特定于每个操作系统/浏览器的本机元素。除非您想实现自定义图像或使用包含图像的自定义 Javascript 库，否则无法更改其颜色/样式
我必须改变而不是收音机的颜色！
是的，你可以这样做，td颜色可以改变

【解决方案1】：

几点：

使用 name 属性将单选按钮定义为同一组的一部分（具有相同名称的单选按钮属于同一组）。
将函数附加到两个单选按钮的onchage 事件中。
您必须使用元素的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>

【讨论】：

这个是首选，因为 OP 没有明确需要 jQuery。好旧的 DOM
良好的轻量级解决方案 +1

【解决方案2】：

您应该使用javascript change 事件在raido 按钮更改时运行您的代码。在事件监听器中检查目标单选的状态和值以设置背景颜色。

$(":radio").change(function(){      
    if (this.checked && this.value == "OK")
        $(this).closest("td").css("background", "green");
    else if (this.checked && this.value == "NO")
        $(this).closest("td").css("background", "red");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table>
  <tr>
    <td bgcolor="#B35556">
      <form action="">    
      OK <input type="radio" name="radio1" id="radio1" value="OK"/> 
      <br>
      NO <input type="radio" name="radio1" id="radio2" value="NO" checked />
      </form>
    </td>
  </tr>
</table>

你也可以使用简单的代码来完成这项工作：

$(":radio").change(function(){      
  if (this.checked)
      $(this).closest("td").css("background", this.value=="OK" ? "green" : "red");      
});

【讨论】：

除此之外，您还可以从 no 上的 checked 属性开始。在这种情况下，请确保 td 的第一个背景颜色为红色。只说一句。这是 jQuery。也可以使用 element.style.backgroundColor 值来做到这一点

【解决方案3】：

你可以在 Ui 上的函数调用中传入一个变量

例如：

<form action="">
   OK <input type="radio" name="radio1" id="radio1"value="OK" checked="color('ok')"/> <BR>
   NO  <input type="radio" name="radio2" id="radio2"value="NO" checked="color('no')"/>

然后在您的 Javascript 中，您可以捕获字符串并检查其内容：

function color(CB) {
         var TEMP = CB;
         if(TEMP == 'ok') {
            td1.bgcolor="green";
         }
         else if(TEMP == 'no'){
            td1.bgcolor="red";
         }
}

【讨论】：

【解决方案4】：

function color()
{
	
  if(document.getElementById("radio1").checked)
  {
	 document.getElementById("td1").style.backgroundColor = "green";
 
  }
  if(document.getElementById("radio2").checked)
  {
 document.getElementById("td1").style.backgroundColor = "#B35556";
  }
 }

<body>
<table>

<tr>
  <td bgcolor="#B35556" id="td1">
  <form action="">
    

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

【讨论】：