$('#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.