Как я могу изменить цвет <td>с помощью радиокнопки? - PullRequest
Новая
       3

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

0 голосов
/ 05 сентября 2018

Как я могу изменить цвет элемента <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>

Я знаю, что этот код очень неправильный, но это пример, чтобы вы поняли мой вопрос

Ответы [ 4 ]

0 голосов
/ 05 сентября 2018 

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>
0 голосов
/ 05 сентября 2018

Несколько баллов:

  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>
0 голосов
/ 05 сентября 2018

Вы можете передать переменную вместе с вызовом функции в 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";
         }
}
0 голосов
/ 05 сентября 2018

Вы должны использовать событие 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");      
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...