Checking radio button when cell is clicked and changing the background of the cell

Question

I would like to check a radio button when the mouse clicks anywhere within the cell, and also use this action to change the colour of the cell. When the radio button is unchecked the colour should go back to white.

My code is

$("td").click(function() {
  $(this).find('input:radio').attr('checked', true);
  $(this).toggleClass('green', $(this).is(":checked"));
});

.green
{
  background-color:green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1">
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr>
    <tr>
      <td style="width: 50px;"><input type="radio" name="name1"></td>
      <td style="width: 50px;"><input type="radio" name="name1"></td>
      <td style="width: 50px;"><input type="radio" name="name1"></td>
      <td style="width: 50px;"><input type="radio" name="name1"></td>
    </tr>
    <tr>
      <td style="width: 50px;"><input type="radio" name="name2"></td>
      <td style="width: 50px;"><input type="radio" name="name2"></td>
      <td style="width: 50px;"><input type="radio" name="name2"></td>
      <td style="width: 50px;"><input type="radio" name="name2"></td>
    </tr>
  </tbody>
</table>

But this does not help to achieve both the actions. Any help please?

Answer 1

you should change your jQuery code like this:

$("td").click(function() {
  $(this).find("input[type=radio]").prop("checked", true);
  $(this).siblings().removeClass("green");
  $(this).addClass("green");
});

Answer 2

$("input:radio").change(function() {
  if($("input:radio").is(":checked")){
    $(this).parent("td").addClass("green").siblings("td").removeClass("green");
  }
  else{
    $(this).parent("td").removeClass("green").siblings("td").removeClass("green");
  }
  
});

.green
{
  background-color:green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1">
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr>
    <tr>
      <td style="width: 50px;"><input type="radio" name="name1"></td>
      <td style="width: 50px;"><input type="radio" name="name1"></td>
      <td style="width: 50px;"><input type="radio" name="name1"></td>
      <td style="width: 50px;"><input type="radio" name="name1"></td>
    </tr>
    <tr>
      <td style="width: 50px;"><input type="radio" name="name2"></td>
      <td style="width: 50px;"><input type="radio" name="name2"></td>
      <td style="width: 50px;"><input type="radio" name="name2"></td>
      <td style="width: 50px;"><input type="radio" name="name2"></td>
    </tr>
  </tbody>
</table>

Answer 3

There are a few little logical errors in your example:

1) checked is a property, not an attribute, so you should be using .prop() to set it (see guidance at https://api.jquery.com/attr/)

2) $(this).is(":checked") won't ever be true, because this represents the table cell, not the radio button

3) Regardless of point 2, it doesn't make any sense to test this value, because (if you check it correctly) you already know it's true due to the previous line of code. What you want to be doing is setting the class to green automatically, but also removing the "green" class from the other cells in the same row.

Here's a demo which achieves all that:

$("td").click(function() {
  $(this).find('input:radio').prop('checked', true);
  $(this).siblings().removeClass("green");
  $(this).addClass('green');
});

.green
{
  background-color:green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1">
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr>
    <tr>
      <td style="width: 50px;"><input type="radio" name="name1"></td>
      <td style="width: 50px;"><input type="radio" name="name1"></td>
      <td style="width: 50px;"><input type="radio" name="name1"></td>
      <td style="width: 50px;"><input type="radio" name="name1"></td>
    </tr>
    <tr>
      <td style="width: 50px;"><input type="radio" name="name2"></td>
      <td style="width: 50px;"><input type="radio" name="name2"></td>
      <td style="width: 50px;"><input type="radio" name="name2"></td>
      <td style="width: 50px;"><input type="radio" name="name2"></td>
    </tr>
  </tbody>
</table>

Answer 4

Firstly to have the radio selected when you click anywhere in the cell wrap it in a label which has display: block set on it. Then you get the behaviour for free without needing any JS.

To set the background on the td which contain a checked radio, hook a change event handler to the radios themselves, then get the closest() td and call addClass() on it. toggleClass() isn't relevant here, as you can only select a radio, you can never de-select it. You can instead use siblings() to remove the green class from any other cells. Try this:

$(':radio').on('change', function() {
  $(this).closest('td').addClass('green').siblings().removeClass('green');
});

table label {
  display: block;
}

table td.green {
  background-color: #0C0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1">
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr>
    <tr>
      <td style="width: 50px;"><label><input type="radio" name="name1"></label></td>
      <td style="width: 50px;"><label><input type="radio" name="name1"></label></td>
      <td style="width: 50px;"><label><input type="radio" name="name1"></label></td>
      <td style="width: 50px;"><label><input type="radio" name="name1"></label></td>
    </tr>
    <tr>
      <td style="width: 50px;"><label><input type="radio" name="name2"></label></td>
      <td style="width: 50px;"><label><input type="radio" name="name2"></label></td>
      <td style="width: 50px;"><label><input type="radio" name="name2"></label></td>
      <td style="width: 50px;"><label><input type="radio" name="name2"></label></td>
    </tr>
  </tbody>
</table>