Highlight Row When the Checkbox Is True

$(".my-check").each(function(e, elem) {
  $(elem).on("change", function() {
    var sel = $(this);
    var num = sel.data("number");
    var co = sel.data("code");
    if (sel.eq(0).is(":checked")) {
      if (!$(".highlight")[0]) { // IF CLASS IS NOT FOUND --> Add class
        sel.closest("tr").addClass("highlight");
      }
      $(".my-check:not([data-number=" + num + "])").prop("disabled", true);
      $(".my-check:not([data-code=" + co + "])").prop("disabled", true);
    } else {
      if (!$(".my-check[data-number=" + num + "]:checked").length) {
        $('table tr').removeClass("highlight");
        $(".my-check").not(sel).prop("disabled", false);
      }
    }
  });
});

.highlight {
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
    <th>Status</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
    <td><input type="checkbox" class="my-check" data-number="7867" data-code="CB45" /></td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
    <td><input type="checkbox" class="my-check" data-number="3307" data-code="HUNT1" /></td>
  </tr>
  <tr>
    <td>Harry</td>
    <td>Green</td>
    <td>50</td>
    <td><input type="checkbox" class="my-check" data-number="7867" data-code="CB45" /></td>
  </tr>
  <tr>
    <td>Mark</td>
    <td>Twain</td>
    <td>94</td>
    <td><input type="checkbox" class="my-check" data-number="5645" data-code="KLY" /></td>
  </tr>
</table>

How to highlight entire row when the checkbox is selected

Well my approach with jQuery is this :

            <p:column >
                <h:selectBooleanCheckbox onclick="highlight(this)" />
            </p:column>

Create .highlighted class in your CSS file:

.highlighted {
    background-color: red;
}

And finally actual function:

          function highlight(param) {  
            var row = jQuery(param).parent().parent(); //children() available as well
                row.toggleClass('highlighted');
          } 

You just get the row of the clicked checkbox and handle assigning of the CSS class. Straight and simple.

EDIT: Of course number of .parent() depends on your html elements composition. Edited the function to fit on your case, I've tried it with different composition of elements.

onChange Checkbox Highlight Row

use jquery..

And don't forget to add jquery cdn......

$("#checkboxSelect").click(function(){
if ($(this).is(":checked")){
 $(this).parent().parent().removeClass("highlight")}
else{
$(this).parent().parent().addClass("highlight")}
    });

That will do it...

Google Sheets highlight a column if a checkbox is checked and also matches an input, applied to the whole row

Try this formula for OR condition

=sumproduct($C$3:$H$3,$C6:$H6=$C$2:$H$2)

try this one for AND condition

=sumproduct($C$3:$H$3,$C6:$H6=$C$2:$H$2)=sumproduct(N($C$3:$H$3))

jquery highlight table row if checkbox is checked

You can use .each() ^[docs] and the :checked ^[docs] pseudo selector:

$('tr .checkboxes:checked').each(function() {
    $(this).closest('tr').addClass('pinkrow');
});

If you want to use pure CSS selectors only, you can test whether an element is checked with the DOM element's checked property:

$('tr .checkboxes').each(function() {
    if(this.checked) {
        $(this).closest('tr').addClass('pinkrow');
    }
});

Also note that tr .checkboxes only selects those .checkboxes elements, which are in a table row (in case there are others).

---

Related Topics