How to Change Background Color of a Row on Checkbox Selection

Change the only row table color when i click the checkbox

You should use .closest() to get the correct row

$('.checkbox').click(function () {     var backgroundColor = $(this).is(":checked") ? "lightgrey;" : "";     $(this).closest('tr').attr('style', 'background-color: '+ backgroundColor +'');});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><table>      <tr class="rowA baris">       <td>A<td>       <Td><input class="checkbox" type="checkbox"><td>      </tr>      <tr class="rowB baris">       <td>B<td>       <Td><input class="checkbox" type="checkbox"><td>      </tr>    </table>

Javascript select entire row (change background color) of a table with checkbox and deselect when next checkbox is clicked

You can always clear all your checkboxes and your background colors and then apply the correct background color and check the checkbox using the row index and checkbox index

Also you need to assign classes to you rows in order to get them with getElementsByClassName not to cells.

Avoid using global variables, you don't need them.

Fiddle proof: https://jsfiddle.net/en20wa9j/

function markRow(rowNumber) {  const row = document.getElementsByClassName('rowclass');  const checkboxes = document.getElementsByClassName('check');  // clear everything  for (let i = 0; i < row.length; i++) {    row[i].style = "background-color: transparent";    checkboxes[i].checked = false;  }  // check the checkbox and color the row  checkboxes[rowNumber].checked = true;  row[rowNumber].style = "background-color: dodgerblue;";}

<table id="table" border="1">  <tr>    <th></th>    <th>ID</th>    <th>Name</th>    <th>Surname</th>  </tr>  <tr class='rowclass'>    <td>      <input type='checkbox' class='check' onclick='markRow(0)'>    </td>    <td class='row'>-</td>    <td class='row'>-</td>    <td class='row'>-</td>  </tr>  <tr class='rowclass'>    <td>      <input type='checkbox' class='check' onclick='markRow(1)'>    </td>    <td class='row'>-</td>    <td class='row'>-</td>    <td class='row'>-</td>  </tr>  <tr class='rowclass'>    <td>      <input type='checkbox' class='check' onclick='markRow(2)'>    </td>    <td class='row'>-</td>    <td class='row'>-</td>    <td class='row'>-</td>  </tr></table>

jQuery change background color of table row when selecting a checkbox

You want the row highlighted? Use the .closest() method to grab the row element, then add a highlighting class to it: http://jsfiddle.net/etVc8/3/

$(function() {
    $('td:first-child input').change(function() {
        $(this).closest('tr').toggleClass("highlight", this.checked);
    });
});

jQuery checkbox select all and change background color on select

something like this? http://jsfiddle.net/hb6cx0tn/9/

var $tbl = $('#tbl');
var $bodychk = $tbl.find('tbody input:checkbox');

$(function () {
    $bodychk.on('change', function () {
        if($(this).is(':checked')) {
            $(this).closest('tr').addClass('hilite');
        }
        else {
            $(this).closest('tr').removeClass('hilite');
        }
    });

    $tbl.find('thead input:checkbox').change(function () {
        var c = this.checked;
        $bodychk.prop('checked', c);
        $bodychk.trigger('change'); 
    });
});

i chose not to use toggle because it doesnt ensure that the checkbox is checked in order for the item to be highlighted.

the line $bodychk.trigger('change'); causes the .change() event to trigger so that you're just not adding a class to the element, you're actually triggering the checking of the element.

Table row backgroung color changes when check box is checked

$(window).load(function() {  $(":checkbox").on("change", function() {    $(this).parent().toggleClass("checked", this.checked);  });});$(window).load(function() {  $(function() {    $('input:checked').parent().toggleClass("checked", this.checked);//use .parent().toggleClass("checked", this.checked)  });});

.checked {  background-color: #ff0000;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="company">  <input type="checkbox" name="Selected[]" class="checkboxC" value="8">Company 8</div><div class="company">  <input type="checkbox" name="Selected[]" class="checkboxC" value="9" checked>Company 9</div>