Sahib Uz Zaman Sahib Uz Zaman - 1 month ago 8
CSS Question

Change table td background color when radio is checked

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

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

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

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

Answer

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)

    <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

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

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

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.

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.

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.

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.