选中无线电时更改表td背景颜色

Question

单击单选按钮时，如何更改表格td背景色？

该视图在foreach循环的帮助下生成10个问题，每个问题有4个单选按钮。使第一个单选按钮名ans[0]，第二个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>

这是另一个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>

我想在用户单击ans[0]单选按钮时将td的背景色更改为1。

Answer 1

这样地？

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

您可以绘制单选按钮，然后处理其更改事件：

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

匹配您的编码风格：修改您的状态表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>

然后添加修改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">
...

并将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被触发。在所有实践中，使用类作为选择器的速度只比元素id稍慢一点，因此这种方法没有实际的性能问题。

然后，我将类分配给显示TD。单击收音机时，我们提取其值，并使用该值在另一个表中定位正确的TD。

编辑：我弄错了要求——它实际上是一个多选择测验应用。有2张桌子。表1是一个进度指标，显示1-10中的哪些问题已经得到回答。回答问题时，进度表中代表该问题的单元格应该变成阴影。表2有问题，每个问题最多可以有4个答案，单选按钮被用作选择答案的用户界面元素。当用户选择一个答案时，该事件应该会导致进度表着色。

这里的困难是单选按钮的值必须同时作为问题编号指示器和问题选项指示器。我选择将这两个指标放入单选按钮值中，作为“q”，其中q是问题号，a是问题中的答案，所以“3,2”代表问题3答案2。然后将无线电值拆分为一个数组，问题no用于在进度表中定位适当的TD。

这引入了一个问题，即当表单发送到服务器时，单选按钮的值将以'q， a'的形式发送。OP必须在服务器端处理这个问题。我相信php可以处理这个。