jquery - table cell background color change with checkbox -

$('#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 change td background color when corresponding check box checked. user must select only 1 check box among three. user must able select all check boxes @ once when wants , corresponding check boxes td background colors should change. i've stuff not done. i'm struct @ place , redundancy there.

demo fiddle here

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>