Change grid/loop row background colour when a response is selected
| Summary | You may have a requirement to change the background colour 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 | AskiaDesign |
| Written for | Survey Programmers, Scripters, Web Designers |
| Keywords | HTML ; JQUERY ; SCRIPT ; SCREENS ; WEB ; LOOPS ; GRIDS ; BACKGROUND ; COLOR ; CHANGE ; SELECTED ; RESPONSE ; HIGHLIGHT |
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:
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>
Step 4
Add a few closing </div> tags in the footer of your specific grid/loop screens:
</div></div>
</div>
Final thoughts
After the script and closing </div> tags are added to the screen, the row's background colour should change after a response has been selected. See GIF demonstration below:
