You will need to look for the "checked" property on the check-boxes.
There will certainly be more elegant ways to do it but this script should be fairly easy to follow.
Assumptions...
- Survey ID - 111111
- Group ID - 222
- Question ID - 333
- Subqestion codes - SQ001, SQ002, SQ003
- Image IDs - variableimage1, variableimage2, variableimage3
Code:
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
// Define the image sources
var img1Original = $('#variableimage1').attr('src');
var img2Original = $('#variableimage2').attr('src');
var img3Original = $('#variableimage3').attr('src');
var img1New = 'https://www.domain.com/surveyassets/images/image_1_new.png';
var img2New = 'https://www.domain.com/surveyassets/images/image_2_new.png';
var img3New = 'https://www.domain.com/surveyassets/images/image_3_new.png';
// Initial settings
if($('#answer111111X222X333SQ001').is(':checked')) {
$('#variableimage1').attr('src', img1New);
}
if($('#answer111111X222X333SQ002').is(':checked')) {
$('#variableimage2').attr('src', img2New);
}
if($('#answer111111X222X333SQ003').is(':checked')) {
$('#variableimage3').attr('src', img3New);
}
// Listeners on the 3 checkboxes
$('#answer111111X222X333SQ001').change(function(event) {
if($(this).is(':checked')) {
$('#variableimage1').attr('src', img1New);
}
else {
$('#variableimage1').attr('src', img1Original);
}
});
$('#answer111111X222X333SQ002').change(function(event) {
if($(this).is(':checked')) {
$('#variableimage2').attr('src', img2New);
}
else {
$('#variableimage2').attr('src', img2Original);
}
});
$('#answer111111X222X333SQ003').change(function(event) {
if($(this).is(':checked')) {
$('#variableimage3').attr('src', img3New);
}
else {
$('#variableimage3').attr('src', img3Original);
}
});
});
</script>
Topic Author
