Okay, here's a script that when placed in the source of the first array:
- Identifies the two arrays (we'll call them q1 and q2)
- Hides the "N/A" column of q2
- When a radio in column 1 of q1 is clicked, the corresponding row in q2 is hidden and its "N/A" option is selected
- When any other radio in q1 is clicked, the corresponding row in q2 is shown and its "N/A" option is de-selected
Code:
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
// Identify the questions
var q1ID = '{QID}';
var q1 = $('#question'+q1ID+'');
var q2 = $(q1).nextAll('.array-flexible-row:eq(0)');
var q2ID = $(q2).attr('id').split('question')[1];
// Add some classes
$('input.radio', q1).each(function(i){
if($('input.radio', $(this).closest('tr')).index($(this)) == 0) {
$(this).addClass('exclusive');
}
});
// Hide the "N/A" column of q2
$('thead th:last', q2).hide();
$('tr[id^="javatbd"]', q2).each(function(i){
$('td:last', this).hide();
});
// Initially Hide/Show the appropriate q2 rows
$('input.radio:checked', q1).each(function(i){
handleRows($(this));
});
// Click events on Q1 radios
$('input.radio', q1).click(function() {
handleRows($(this));
});
$('input.radio', q1).closest('td').click(function() {
handleRows($('input.radio', this));
});
// A function to hide/show the appropriate q2 rows
function handleRows(el) {
var rowIndex = $('tr', $(el).closest('tbody')).index($(el).closest('tr'));
if($(el).hasClass('exclusive')) {
// Check the "N/A" in the q2 row
$('tr[id^="javatbd"]:eq('+rowIndex+') input.radio:last', q2).attr('checked', true)
// Hide the q2 row
$('tr[id^="javatbd"]:eq('+rowIndex+')', q2).hide();
}
else {
// Un-check the "N/A" in the q2 row
$('tr[id^="javatbd"]:eq('+rowIndex+') input.radio:last', q2).attr('checked', false)
// Show the q2 row
$('tr[id^="javatbd"]:eq('+rowIndex+')', q2).show();
}
// Now, fix up the q2 row background colours
var q2RowIndex = 0;
$('tr[id^="javatbd"]:visible', q2).each(function(i, el){
q2RowIndex ++;
$(el).removeClass('array1, array2');
if(q2RowIndex % 2 == 0) {
$(el).addClass('array1');
}
else {
$(el).addClass('array2');
}
});
// Hide/show q2
if($('.radio.exclusive:checked', q1).length == $('.radio.exclusive', q1).length) {
$(q2).hide();
}
else {
$(q2).show();
}
}
});
</script>
Here's the survey back with the script in the first question of the first group.
Topic Author
