Scroll

Change grid/loop row background color when a response is selected

Change grid/loop row background color when a response is selected

Follow
Summary You may have a requirement to change the background color of the entire row of a grid/loop once a response is selected. The steps below show you a script that works with both "radio" and "checkbox" buttons.
Applies to Askia Design
Written for Survey Programmers, Scripters, Web Designers
Keywords HTML ; JQUERY ; SCRIPT ; SCREENS ; WEB ; LOOPS ; GRIDS ; BACKGROUND ; COLOR ; CHANGE ; SELECTED ; RESPONSE

 

Download the 5.3.5 example here

Download the 5.4.4/5.4.6 example here

 

Step 1 

For simplicity, create a standard "Question Table" loop, with a single closed variable nested under it that only contains a few responses, like so:

GridChangeRowColor_1_.png

GridChangeRowColor_2_.png

Step 2

Generate your screen(s). 

Step 3

Insert a label onto the screen and add the following script into the caption of the label:

<script>
$(document).ready(function(){
$(document).on('change', 'input[type=radio],input[type=checkbox]', function() {
if ($(this).parent().parent().find('input').is(':checked')) {
$(this).parent().parent().children().css("background-color","#ccffcc");
} else {
$(this).parent().parent().children().css("background-color","");
}
});
});
</script>

GridChangeRowColor_3_.png

Step 4

Add a few closing </div> tags in the footer of your specific grid/loop screens:

</div></div>
</div>

GridChangeRowColor_4_.png

Final thoughts

After the script and closing </div> tags are added to the screen, the row's background color should change after a response has been selected. See GIF demonstration below:

 GridChangeRowColor.gif

Have more questions? Submit a request

Comments