当检查无线电时，改变表td背景颜色。

How can I change the table td background color when a radio button is clicked?

当一个单选按钮被点击时，我如何改变表格td背景颜色?

This is the view which generates 10 questions having 4 radio buttons each with the help of foreach loop. Making first radio button name ans[0],second ans[1] and so on

这是产生10个问题的视图，每个问题有4个单选按钮，每个按钮都有foreach循环的帮助。第一个单选按钮的名称为ans[0]、second ans[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>

This is the table data which is in ANOTHER 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>

I want to change the background color of td for 1 when the user clicks the ans[0] radio button.

当用户单击ans[0]单选按钮时，我想改变td的背景颜色。

5 个解决方案

#1

Matching your coding style: Modify your status table TD's so none have the colour class (and clean up that stray closing div - assuming thats a cut & paste issue)

匹配您的编码风格:修改您的状态表TD，所以没有一个颜色类(并清理这个杂散的关闭div——假设这是一个剪切和粘贴问题)

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

Then add modify the output of your php so the radios look like

然后添加修改你的php的输出，这样收音机看起来就像。

// 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">
...

and change JS code to

并将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"});
    }
})

What did I do: I modified the radio button JQ selector to use a specific class instead of specifying all/any radio elements. This does not need to be a 'real' css class. It is just being used as a selector. The reason I suggest this is that otherwise your selector reacts to any radio button so that if your page contains any other radio's you will find this JS is fired when you were not expecting it. In all practical terms, using classes as selectors is only very slightly less speedy than element id's so there is no realistic performance issue with this approach.

我做了什么:我修改了单选按钮JQ选择器以使用一个特定的类，而不是指定所有/任何无线电元素。这并不需要是一个“真正的”css类。它只是作为一个选择器。我建议这样做的原因是，如果你的选择器对任何一个单选按钮都有反应，那么如果你的页面包含了其他的广播，你就会发现，当你没有预料到的时候，这个JS会被触发。在所有实际的术语中，使用类作为选择器的速度比元素id的速度稍微慢一些，因此这种方法没有实际的性能问题。

I then assigned classes to the display TD's. When the radio is clicked we extract its value and use this to target the correct TD in the other table.

然后，我将类分配给显示TD的。当广播被单击时，我们提取它的值并使用它来锁定另一个表中的正确的TD。

EDIT: I got the requirement wrong - it is actually a multi-choice quiz app. There are 2 tables. Table 1 acts as a progress indicator showing which questions from 1 - 10 have been answered. When a question is answered the cell representing that question in the progress table should become shaded. Table 2 has the questions and each question can have up to 4 answers, with a radio button being used as the UI element for selection of an answer. When the user makes a selection of an answer that event should cause the progress table shading to occur.

编辑:我的要求是错误的-它实际上是一个多选择的测试应用程序。有两张桌子。表1作为一个进度指示器，显示从1到10的问题已得到解答。当回答一个问题时，在进度表中表示这个问题的单元格应该被着色。表2有问题，每个问题最多可以有4个答案，其中一个单选按钮用作选择答案的UI元素。当用户做出选择时，事件应该会导致进度表阴影出现。

The difficulty here is that the value of the radio buttons has to serve both as a question number indicator AND a question option indicator. I opted to have these two indicators placed into the radio button value as 'q,a' where q is the question no and a the answer within the question, so '3,2' represents question 3 answer 2. The radio value is then split into an array and the question no used to target the appropriate TD in the progress table.

这里的困难在于，单选按钮的值必须同时作为一个问题数指示器和一个问题选项指示器。我选择将这两个指标放入到单选按钮的值中作为“q”，在这个问题中q是“不”和“答案”，所以“3,2”代表问题3回答2。然后将广播值拆分为一个数组，而这个问题不用于在进度表中针对适当的TD。

This introduces the issue that when the form is sent to the server the radio button values will be transmitted as 'q,a'. The OP will have to handle this on the server side. I am sure php can handle this.

这将引入当表单发送到服务器时，单选按钮值将被传输为“q,a”的问题。OP将不得不在服务器端处理这个问题。我确信php可以处理这个问题。

#2

you can grap the radio buttons and then handel their change event :

你可以按下单选按钮，然后韩德尔的改变事件:

$('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 */

}

#3

Like this?

像这样的吗?

 $('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>

I hope that you can use this our tell me what you really want so I can write it for you :-) Copy of https://*.com/a/27663896/7007968
I am not the writer of this code

我希望你能使用这个我们的告诉我你真正想要的，所以我可以为你写:-)拷贝https://*.com/a/27663896/7007968我不是这个代码的作者。

#4

You can add this code in your JS, it will definitely work i have tried it.

您可以将这段代码添加到JS中，这肯定是我尝试过的。

JS:

JS:

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

If you want to add it as a class,

如果你想把它作为一个类添加，

tds[id].className ="green";

where green will be defined like this,

绿色的定义是这样的，

.green{
background-color:green;
}

HTML:

HTML:

And then call the function in the on-click of your radio button as shown below in an example,

然后在单击按钮时调用该函数，如下面的示例所示，

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

#5

Assuming that:

假设:

1. The color class is the one that is used to highlight a status cell.
2. 颜色类是用来突出显示状态单元格的类。
3. You are unable to mark the status table with an ID for easier query selector matching. Because of this, the table class, and the "Answer Status" text is used for matching the status table.
4. 您无法用ID标记状态表，以便更方便地查询选择器匹配。因此，表类和“应答状态”文本用于匹配状态表。

Solution using jQuery

使用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");
});