таблица изменений фона ячейки цвета с флажком

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>

Я хочу изменить цвет фона тд, когда соответствующий флажок. Пользователь должен выбрать только один флажок среди трех. Пользователь должен иметь возможность выбрать все флажки сразу, когда он захочет, и соответствующие флажки td фоновые цветаследует изменить. У меня есть кое-что, но не полностью сделано. Я строю в каком-то месте, и есть некоторая избыточность.

Demo fiddle here

Answer 1

Как это:

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>