Как я могу изменить цвет элемента <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>
Я знаю, что этот код очень неправильный, но это пример, чтобы вы поняли мой вопрос
я должен изменить цвет <td>, а не радио!
да, ты можешь это сделать, тд цвет можно поменять
Вы должны использовать событие 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");
});
И в дополнение к этому вы можете начать с атрибута проверил на нет. В этом случае убедитесь, что первый цвет фона вашего td красный. Всего одно замечание. Это jQuery. Также можно сделать это с помощью значения element.style.backgroundColor.
Несколько моментов:
Определите радиокнопки как часть той же группы со свойством 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. Старый добрый ДОМ
Хорошее легкое решение +1
Вы можете передать переменную вместе с вызовом функции в пользовательском интерфейсе
Например:
<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";
}
}
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>
Радиокнопка - это собственный элемент, специфичный для каждой ОС / браузера. Невозможно изменить его цвет / стиль, если вы не хотите реализовать пользовательские изображения или использовать пользовательскую библиотеку Javascript, которая включает изображения.