table cell background color change with checkbox

Question

$('#selectall1').click(function(event) {
  if (this.checked) {
    $('.first').each(function() {
      this.checked = true;
    });
    $('.second').each(function() {
      this.checked = false;
    });
    $('.third').each(function() {
      this.checked = false;
    });
  } else {
    $('.first').each(function() {
      this.checked = false;
    });
  }
});

$('#selectall2').click(function(event) {
  if (this.checked) {
    $('.second').each(function() {
      this.checked = true;
    });
    $('.first').each(function() {
      this.checked = false;
    });
    $('.third').each(function() {
      this.checked = false;
    });
  } else {
    $('.second').each(function() {
      this.checked = false;
    });
  }
});

$('#selectall3').click(function(event) {
  if (this.checked) {
    $('.third').each(function() {
      this.checked = true;
    });
    $('.first').each(function() {
      this.checked = false;
    });
    $('.second').each(function() {
      this.checked = false;
    });
  } else {
    $('.third').each(function() {
      this.checked = false;
    });
  }
});

$(':checkbox').on('change', function() {
  var th = $(this),
    name = th.prop('name');
  if (th.is(':checked')) {
    $(':checkbox[name="' + name + '"]').not($(this)).prop('checked', false);
  }
});

$("input:checkbox[class='first']").click(function() {
  $(this).parent().toggleClass("highlight1");
});

$("input:checkbox[class='second']").click(function() {
  $(this).parent().toggleClass("highlight2");
});

$("input:checkbox[class='third']").click(function() {
  $(this).parent().toggleClass("highlight3");
});

div.highlight1 {
    background-color: #9FF781;
}
div.highlight2 {
    background-color: #F78181;
}
div.highlight3 {
    background-color: #8181F7;
}
div.highlight {
    background-color: #EEEEEE;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<table border="1">
  <tr>
    <th>
      <INPUT type="checkbox" id="selectall1" />
    </th>
    <th>
      <INPUT type="checkbox" id="selectall2" />
    </th>
    <th>
      <INPUT type="checkbox" id="selectall3" />
    </th>
  </tr>
  <tr>
    <td>
      <div>
        <input type="checkbox" class="first" name="1" />
      </div>
    </td>
    <td>
      <div>
        <input type="checkbox" class="second" name="1" />
      </div>
    </td>
    <td>
      <div>
        <input type="checkbox" class="third" name="1" />
      </div>
    </td>
  </tr>
  <tr>
    <td>
      <div>
        <input type="checkbox" class="first" name="2" />
      </div>
    </td>
    <td>
      <div>
        <input type="checkbox" class="second" name="2" />
      </div>
    </td>
    <td>
      <div>
        <input type="checkbox" class="third" name="2" />
      </div>
    </td>
  </tr>
  <tr>
    <td>
      <div>
        <input type="checkbox" class="first" name="3" />
      </div>
    </td>
    <td>
      <div>
        <input type="checkbox" class="second" name="3" />
      </div>
    </td>
    <td>
      <div>
        <input type="checkbox" class="third" name="3" />
      </div>
    </td>
  </tr>
</table>

I want to change td background color when corresponding check box is checked. User must select only one check box among three. User must be able to select all check boxes at once when he wants and corresponding check boxes td background colors should change. I've some stuff but not completely done. I'm struct at some place and some redundancy is there.

Demo fiddle here

Answer 1

How's this:

var selectall = $('.selectall');
selectall.click(function (event) {
    $('.' + $(this).data('class')).each(function () {
        this.checked = true;
        highlight(this, $(this).closest('td'));
    });
});

$('input[type=radio]').not(selectall).on('click', function() {
    highlight(this, $(this).closest('td'));
});

function highlight(radio, radioCell) {
    if (radio.checked) {
        radioCell.closest('tr').children('td.highlight').removeClass('highlight');
        radioCell.addClass('highlight');
    }
}

td:nth-child(3n + 1).highlight {
    background-color: #9FF781;
}
td:nth-child(3n + 2).highlight {
    background-color: #F78181;
}
td:nth-child(3n + 3).highlight {
    background-color: #8181F7;
}
div.highlight {
    background-color: #EEEEEE;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
    <tr>
        <th>
            <INPUT type="radio" name="selectall" id="selectall1" class="selectall" data-class="first" />
        </th>
        <th>
            <INPUT name="selectall" type="radio" id="selectall2" class="selectall" data-class="second" />
        </th>
        <th>
            <INPUT name="selectall" type="radio" id="selectall3" class="selectall" data-class="third" />
        </th>
    </tr>
    <tr>
        <td>
            <div>
                <input type="radio" class="first" name="1" />
            </div>
        </td>
        <td>
            <div>
                <input type="radio" class="second" name="1" />
            </div>
        </td>
        <td>
            <div>
                <input type="radio" class="third" name="1" />
            </div>
        </td>
    </tr>
    <tr>
        <td>
            <div>
                <input type="radio" class="first" name="2" />
            </div>
        </td>
        <td>
            <div>
                <input type="radio" class="second" name="2" />
            </div>
        </td>
        <td>
            <div>
                <input type="radio" class="third" name="2" />
            </div>
        </td>
    </tr>
    <tr>
        <td>
            <div>
                <input type="radio" class="first" name="3" />
            </div>
        </td>
        <td>
            <div>
                <input type="radio" class="second" name="3" />
            </div>
        </td>
        <td>
            <div>
                <input type="radio" class="third" name="3" />
            </div>
        </td>
    </tr>
</table>