Измените цвет фона td стола, когда радио установлено.

Question

Как изменить цвет фона таблицы td при нажатии переключателя?

Это представление, которое генерирует 10 вопросов, имеющих 4 переключателя каждый с помощью петли foreach. Making имя первой кнопки радио ANS [0], второй анс [1] и так далее

<div class="col-lg-8" > 
      <table class="table" style="width: 100%;"> 
      <?php 
      $i = 0; 
      $ques = 1;    
      echo form_open('Menu/submit_ans', array('name' => 'quiz')); 
      foreach ($quiz_array as $q){ 
      ?>  
      <td colspan="2"style="background-color: #337ab7;color:white;"><h4>Question No. <?php echo $ques?> </h4></td> 
      <tr> 
      <td style="background-color: #D3D3D3;color:white;" colspan="2"><h5><?php echo $q->ques;?></h5></td> 
      <input hidden name="qid[]" type="text" value="<?php echo $q->qid;?>"> 
      <input hidden name="uid[]" type="text" value="<?php echo $user['id'];?>"> 
      </tr> 
      <tr> 
      <td><?php echo $q->ans_1;?></td> 
      <td><input type="radio" class="myRadio" name="ans[<?php print $q->qid; ?>]" value="1"></td> 
      </tr> 
      <tr> 
      <td><?php echo $q->ans_2;?></td> 
      <td><input type="radio" class="myRadio" name="ans[<?php print $q->qid; ?>]" value="2"></td> 
      </tr> 
      <tr> 
      <td><?php echo $q->ans_3;?></td> 
      <td><input type="radio" class="myRadio" name="ans[<?php print $q->qid; ?>]" value="3"></td> 
      </tr> 
      <tr> 
      <td><?php echo $q->ans_4;?></td> 
      <td><input type="radio" class="myRadio" name="ans[<?php print $q->qid; ?>]" value="4"></td> 
      <input type="radio" hidden name="ans[<?php print $q->qid; ?>]" value="0" checked="checked"> 
      </tr> 


      <?php 
       $i++; 
       $ques++; 
      } 
      ?> 
      </table> 
      <center><button class="btn btn-success" type="submit">Submit!</button></a></center> 
      <?php echo form_close();?> 
     </div> 

Это таблица данных, которая находится в другом Div.

<table class="table"> 
      <tr> 
      <thead> 
       <th colspan="10">Answer Status</th> 
      </thead> 
      </tr> 
      <tr> 
      <td class="color">1</div></td> 
      <td>2</td> 
      <td>3</td> 
      <td>4</td> 
      <td>5</td> 
      <td>6</td> 
      <td>7</td> 
      <td>8</td> 
      <td>9</td> 
      <td>10</td> 
      </tr> 
</table> 

Я хочу изменить цвет фона тд на 1, когда пользователь нажимает ВНС [0] радиокнопку.

Answer 1

Matching ваш стиль кодирования: не Modify так ни ваш статус табличной ТД имеют класс цвета (и очистить, что паразитной закрывающей ди v - если то будет вырезанной вопрос & паста)

<table class="table"> 
    <tr> 
     <thead> 
      <th colspan="10">Answer Status</th> 
     </thead> 
    </tr> 
    <tr> 
     <td class="answer answer1">1</td> 
     <td class="answer answer2">2</td> 
     <td class="answer answer3">3</td> 
     ... 
    </tr> 
</table> 

Затем добавить изменение выходного РНР так радиоприемники выглядеть

// For optional answers to Q1 
<input type="radio" value="1,1" class="myRadio"> 
<input type="radio" value="1,2" class="myRadio"> 
... 
// For optional answers to Q2 
<input type="radio" value="2,1" class="myRadio"> 
<input type="radio" value="2,2" class="myRadio"> 
... 

и изменить JS код

$('.myRadio').on('change', function() { 
    var aSelection = $(this).val().split(",") // split 1,2 into an array 

    var tgt="answer" + aSelection[0] // first digit in radio btn val 

    if ($(this).prop("checked")) { 
     $("." + tgt).css({ backgroundColor: "green"}); 
    } 
}) 

Что я сделал: я изменил переключатель JQ переключателя для использования определенного класса вместо указания всех/любых радиоэлементов. Это не должно быть «реальным» классом css. Он просто используется в качестве селектора. Причина, по которой я предлагаю это, заключается в том, что в противном случае ваш селектор реагирует на любой переключатель, так что если ваша страница содержит какие-либо другие радиостанции, вы обнаружите, что этот JS запущен, когда вы этого не ожидали. Во всех практических аспектах использование классов в качестве селекторов является лишь немного менее быстрым, чем идентификатор элемента, поэтому нет реалистичной проблемы с производительностью при таком подходе.

Затем я назначил классы дисплею TD. При нажатии на радиоприемник мы извлекаем его значение и используем его для задания правильного TD в другой таблице.

EDIT: Я получил неправильное требование - это приложение для викторины с несколькими вариантами выбора. Есть 2 стола. Таблица 1 выступает в качестве индикатора прогресса, на котором указаны ответы на вопросы от 1 до 10. Когда ответ на вопрос, ячейка, представляющая этот вопрос в таблице прогресса, должна быть заштрихована. В таблице 2 есть вопросы, и у каждого вопроса может быть до 4 ответов, при этом в качестве элемента пользовательского интерфейса используется выбор переключателя для выбора ответа. Когда пользователь делает выбор ответа, это событие должно вызывать затенение таблицы выполнения.

Сложность заключается в том, что значение переключателей должно служить как индикатором номера вопроса, так и индикатором вопроса. Я решил включить эти два индикатора в значение переключателя как «q, a», где q - это вопрос «нет» и ответ в вопросе, поэтому «3,2» представляет вопрос 3 ответ 2.Значение радио затем разбивается на массив и вопрос не используется для таргетинга соответствующего TD в таблицу прогресса.

Это указывает на то, что при отправке формы на сервер значения радиокнопки будут передаваться как «q, a». OP придется обрабатывать это на стороне сервера. Я уверен, что php справится с этим.

Answer 2

Нравится?

$('input:radio').checked(function() { 
     $(this).closest('td').addClass('highlight'); 
    }); 
    .highlight { 
     background: green; 
    } 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
    <tr id='game_1'> 
     <td class='bowl'>Fiesta Bowl</td> 
     <td id='radiocell'> 
     <input type='radio' name=1 value='Arizona'></input> 
     </td> 
     <td class='team1'>Arizona</td> 
     <td id='radiocell'> 
     <input type='radio' name=1 value='Boise State'></input> 
     </td> 
     <td class='team2'>Boise State</td> 
     <td class='gameDay'>January 1</td> 
    </tr> 

Я надеюсь, что вы можете использовать это наше сказать мне, что вы действительно хотите, чтобы я мог написать это для вас :-) Копия https://stackoverflow.com/a/27663896/7007968
Я не автор этого кода

Answer 3

вам может грейферы радиокнопок, а затем Генделя их событие изменения:

$('td input[type="radio"]').change(function(event) 
{ 
if($(event.target).prop('checked')) 
{ 
    /* send radio index from here */ 
    var index= $(event.target).val(); 
    changeBackground(index); 

}else 
{ 
    /* some code if you want for false section */ 
} 

}) 


function changeBackground(td_index) 
{ 

    /* write you codes herer for changing the td color ...... use td_index paramerte */ 

} 

Answer 4

Предполагая, что:

1. color класс является тот, который используется для выделения ячейки состояния.
2. Вы не можете пометить таблицу состояния идентификатором для более удобного выбора селектора запросов. Из-за этого класс table, а текст «Статус ответа» используется для сопоставления таблицы состояний.

Решение с помощью JQuery

var 
    statusCells 
; 

// Find all cells in the status table. 
statusCells = $(".table:contains('Answer Status')").find("td"); 

// Match elements that have an ID that starts with "ans". 
// Listen to "change" events on these radio buttons. 
$("[id^='ans']").change(function onChange(event) { 
    var 
     radio, 
     value 
    ; 

    // Find the clicked radio button. 
    radio = $(event.target); 
    // Take the value of the radio button. 
    value = radio.val(); 

    statusCells 
     // Remove previous highlighting. 
     .removeClass("color") 
     // Find the status cell with text matching the value of the clicked 
     // radio button. 
     .filter(":contains('" + value + "')") 
     // Highlight the matching status cell. 
     .addClass("color"); 
}); 

Answer 5

Вы можете добавить этот код в JS, это, безусловно, работать я пробовал.

JS:

function changeColColor(){ 
var tds=$("td"); 
for(id in tds){ 
var text=tds[id].innerHTML; 
if(text==1){ 
tds[id].style.backgroundColor="green"; 
} 
} 
} 

Если вы хотите добавить его как класс,

tds[id].className ="green"; 

, где зеленый будет определяться как это,

.green{ 
background-color:green; 
} 

HTML:

А затем вызвать функцию в по-щелчком кнопки радио, как показано ниже в примере,

<input type="radio" name="ans0" value="1" onclick="changeColColor()">