Change background color of a div/table row when clicking a radio button

Question

I'm making a list of options with radio buttons, but these are inside a table, belongs to a TD.

I've tried to highlight the table row with a color when pressing the radio button, but then it highlights all the table rows and not the one I pressed.

Once I press, for instance: Option 1. I only want to highlight Option 1.

Look at this example: look jsFiddle

[sigh](http://caniuse.com/#feat=css-has) (future ideal solution) — Rico Kahler, Apr 05 '17 at 21:11

Neil · Answer 1 · 2017-04-05T21:05:36.957

How about using relative selectors? Additionally, you shouldn't have more than one element with the same id, so I fixed that too.

//jQuery implementation
$('[name=valgt]').click(function() {
    $(".checked").removeClass("checked");
    if($(this).is(':checked')) {
        $(this).closest('.crimeOption').addClass('checked');
    }
});

.checked {
    background: linear-gradient(to right, rgb(76, 140, 128), rgba(55, 119, 120, 1));
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<table>
  <thead>
    <tr>
      <th>Head
      </th>
    </tr>
  </thead>
  <tbody class="radio-list">
    <tr class="crimeOption">
      <td>
        <input type="radio" name="valgt" />
        <label>Option 1.
          </td>
    </tr>
    <tr class="crimeOption">
      <td>
        <input type="radio" name="valgt" />
        <label>Option 2.
          </td>
    </tr>
    <tr class="crimeOption">
      <td>
        <input type="radio" name="valgt" />Option 3.
      </td>
    </tr>
    <tr class="crimeOption">
      <td>
        <input type="radio" name="valgt" />Option 4.
      </td>
    </tr>
    <tr class="crimeOption">
      <td>
        <input type="radio" name="valgt" />Option 5.
      </td>
    </tr>
  </tbody>
</table>

You can use `closest()` function instead of `parents()`. As `closest()` is more efficient than `parents()`. Check [here](http://stackoverflow.com/questions/9193212/difference-between-jquery-parent-parents-and-closest-functions#9193419) for details. — Mahesh Singh Chouhan, Apr 05 '17 at 21:04

score 1 · Answer 2 · answered Apr 05 '17 at 20:59

Instead of refering to each input separately, you could select all of them, bind change event listener and add the checked class to the parent of actually selected input.

$('.crimeOption input').change(function() {
  $('.crimeOption td').removeClass('checked');
  if ($(this).is(':checked')) {
    $(this).parent().addClass('checked');
  } 
});

.checked {
  background: linear-gradient(to right, rgb(76, 140, 128), rgba(55, 119, 120, 1));
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>Head</th>
    </tr>
  </thead>
  <tbody class="radio-list">
    <tr class="crimeOption">
      <td><input type="radio" name="valgt" id="valgt1" /><label>Option 1.</td>
                    </tr>
                    <tr class="crimeOption">
                        <td><input type="radio" name="valgt" id="valgt2" /><label>Option 2.</td>
                    </tr>
                    <tr class="crimeOption">
                        <td><input type="radio" name="valgt" id="valgt3" />Option 3.</td>
                    </tr>
                    <tr class="crimeOption">
                        <td><input type="radio" name="valgt" id="valgt4" />Option 4.</td>
                    </tr>
                    <tr class="crimeOption">
                        <td><input type="radio" name="valgt" id="valgt5" />Option 5.</td>
                    </tr>
                </tbody>
            </table>

score 0 · Answer 3 · answered Apr 05 '17 at 20:58

0

You're selecting the td's with a class selector that they all share. You'll need to change:

        $('.crimeOption').addClass('checked');

to

        $(this).closest('td').addClass('checked');

answered Apr 05 '17 at 20:58

Michael Arrison

1,464
2
13
22

Mahesh Singh Chouhan · Accepted Answer · 2017-04-05T23:18:59.183

0

Updated your jquery function on jsfiddle code here (https://jsfiddle.net/b4w0cnbf/7/)

$('input[type="radio"]').click(function() {
    $('.crimeOption').removeClass('checked');
    if($(this).is(':checked')) {
        $(this).closest('.crimeOption').addClass('checked');
    }
});

Updating jquery code as per comment request, Updated jsfiddle link:

$('input[type="radio"]').click(function(e) {
    $(this).closest('.crimeOption').trigger('click');
});

$('.crimeOption').click(function() {
    $('.crimeOption').removeClass('checked');
    if($(this).find('input[type="radio"]').is(':checked')) {
        $(this).find('input[type="radio"]').prop("checked", false);
        //$(this).addClass('checked');
    } else {
        $(this).find('input[type="radio"]').prop("checked", true);
        $(this).addClass('checked');
    }

});

edited Apr 05 '17 at 23:18

answered Apr 05 '17 at 21:00

Mahesh Singh Chouhan

2,558
1
16
26

May i know the reason for answer is not useful? – Mahesh Singh Chouhan Apr 05 '17 at 21:05
This was useful to me, I don't know who downed it. Worked like a charm! Thank you a lot. – Pinch Apr 05 '17 at 21:09
Please upvote it or mark answer as useful, so that it helps others. Thanks – Mahesh Singh Chouhan Apr 05 '17 at 21:10
I have no idea who the one marked this answer as not useful, without any logic? – Mahesh Singh Chouhan Apr 05 '17 at 21:11
Okay, this is kinda off topic. But is it possible to make it clickable on the whole row? I just click on the text instead of only the radio button to highlight it? More user friendly. – Pinch Apr 05 '17 at 21:11
Hey @Pinch, Please find updated code as per comment request [here](https://jsfiddle.net/b4w0cnbf/10/) – Mahesh Singh Chouhan Apr 05 '17 at 21:25
@Pinch to make the whole row clickable and preserve the mouse cursor icon try this: `Option 1.` – Don Foumare Apr 05 '17 at 23:17

score -1 · Answer 5 · answered Apr 05 '17 at 20:57

How about this

$("input[type='radio']").change(function(){
  var value = $( 'input[name=opt]:checked' ).val();
  $("input[type='radio']").parent('td').css("background","initial");
 $(this).parent('td').css("background","red");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
                <thead>
                    <tr>
                        <th>Head</th>
                    </tr>
                </thead>
                <tbody class="radio-list">
                    <tr class="crimeOption">
                        <td><input type="radio" name="valgt" id="valgt1" /><label>Option 1.</td>
                    </tr>
                    <tr class="crimeOption">
                        <td><input type="radio" name="valgt" id="valgt2" /><label>Option 2.</td>
                    </tr>
                    <tr class="crimeOption">
                        <td><input type="radio" name="valgt" id="valgt3" />Option 3.</td>
                    </tr>
                    <tr class="crimeOption">
                        <td><input type="radio" name="valgt" id="valgt4" />Option 4.</td>
                    </tr>
                    <tr class="crimeOption">
                        <td><input type="radio" name="valgt" id="valgt5" />Option 5.</td>
                    </tr>
                </tbody>
            </table>

$("input[type='radio']").change(function(){
  var value = $( 'input[name=opt]:checked' ).val();
  $("input[type='radio']").parent('td').css("background","initial");
    $(this).parent('td').css("background","red");
});

score -1 · Answer 6 · answered Apr 05 '17 at 21:01

-1

This is simply done by CSS

Just use :checked selector

input[type="radio"]:checked + label{
  background:red;
}

answered Apr 05 '17 at 21:01

Ajay

196
2
12

Change background color of a div/table row when clicking a radio button

6 Answers6