Satya Satya - 2 months ago 19
CSS Question

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 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

enter image description here

Answer

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>