如何更改a的颜色with a radio button?
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何更改a的颜色with a radio button?相关的知识，希望对你有一定的参考价值。
如何根据单选按钮的值更改<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>
我知道这段代码是非常错误的，但这是让你理解我的问题的一个例子
答案
几点：
- 使用name属性将单选按钮定义为同一组的一部分（具有相同名称的单选按钮属于同一组）。
- 将功能附加到两个单选按钮的
onchage事件。 - 你必须使用元素qazxsw poi属性来设置qazxsw poi。
尝试以下方式：
stylebackgroundColor另一答案
您应该使用javascript 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>change另一答案
你可以在Ui上传入一个变量和函数调用
例如：
<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>然后在你的Javascript中你可以捕获字符串并检查它的内容：
$(":radio").change(function(){
if (this.checked)
$(this).closest("td").css("background", this.value=="OK" ? "green" : "red");
});
另一答案
<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')"/>
function color(CB) {
var TEMP = CB;
if(TEMP == 'ok') {
td1.bgcolor="green";
}
else if(TEMP == 'no'){
td1.bgcolor="red";
}
}
以上是关于如何更改a的颜色with a radio button?的主要内容，如果未能解决你的问题，请参考以下文章