2. PHPRunner Tips and Tricks
  3. How to change row background color when the check box is checked and remove background when unchecked
This topic is locked

How to change row background color when the check box is checked and remove background when unchecked

 		3/19/2015 10:51:39 AM
PHPRunner Tips and Tricks
S
 smez author

This is achieved using custom CSS and Javascript see:

http://xlinesoft.com/phprunner/docs/how_to_add_external_files.htm

  1. Create a checkedHighlight style using CSS:

    .checkedHighlight {

    background-color: yellow !important;

    }
  2. Add javascript (jquery) to toggle the style on/off when checkbox is checked/unchecked (also works with "chooseAll" at top of list page):

    $(":checkbox").change(function() {

    $(this).closest("tr").find("td").toggleClass("checkedHighlight", this.checked);

    });

    $("#chooseAll_1").change(function() {

    $('#chooseAll_1').closest("table").find("tr").find("td").toggleClass("checkedHighlight", this.checked);

    });
    Note: Technically speaking you are changing the background color of each cell within the "checked" row which creates the effect of changing the background color of the row.
S
 		smez author 10/23/2020

Update (5 years later!)
Previous code caused problems because chooseAll can be changed by clicking the containing th cell (but not the checkbox) such that the change function was not activated. This is fixed by adding a click function to the containing th cell.
Add the following code to the JavaScript OnLoad event on the List page:

//append style for checkedHighlight class

$("<style>")

.prop("type", "text/css")

.html(".checkedHighlight {background-color: yellow !important;}")

.appendTo("head");
// highlight any selected onload

$('input[name="selection[]"]:checked').closest("tr").find("td").addClass("checkedHighlight");
// on change single item

$('input[name="selection[]"]').change(function()

{
if($(this).is(':checked'))

{

$(this).closest("tr").find("td").addClass("checkedHighlight");

}

else

{

$(this).closest("tr").find("td").removeClass("checkedHighlight");

}

}

);
// on click chooseAll th

$('#chooseAll_1').closest("th").click(function()

{

if($('#chooseAll_1').is(':checked'))

{

$('input[name="selection[]"]').closest("tr").find("td").addClass("checkedHighlight");

}

else

{

$('input[name="selection[]"]').closest("tr").find("td").removeClass("checkedHighlight");

}

}

);
A
 		alghanim 10/26/2020

Thanks really cool