Как я могу изменить цвет <td> с помощью переключателя?

Как я могу изменить цвет элемента <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, которая включает изображения.

shankar singh rajput 05.09.2018 14:16

я должен изменить цвет <td>, а не радио!

NarcosZTK_10 05.09.2018 14:19

да, ты можешь это сделать, тд цвет можно поменять

shankar singh rajput 05.09.2018 14:20
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
3
319
4
Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

Вы должны использовать событие 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.

Sparky 05.09.2018 14:25
Ответ принят как подходящий

Несколько моментов:

  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>

Этот вариант предпочтительнее, поскольку OP не разъяснил необходимость jQuery. Старый добрый ДОМ

Sparky 05.09.2018 14:28

Хорошее легкое решение +1

Domenik Reitzner 05.09.2018 14:29

Вы можете передать переменную вместе с вызовом функции в пользовательском интерфейсе

Например:

<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>

Другие вопросы по теме