Code:
<script type="text/javascript" data-author="Tony Partner">
$(document).on('ready pjax:scriptcomplete',function(){
var thisQuestion = $('#question{QID}');
if($('.inserted-select', thisQuestion).length == 0) {
// Column-specific classes
$('tr.subquestion-list', thisQuestion).each(function(i) {
$('th, td', this).each(function(i) {
$(this).addClass('column-'+i);
});
});
// Insert checkboxes into column 1
$('.answer-item.column-1', thisQuestion).each(function(i) {
var column = 1;
var row = i+1;
$(this).addClass('with-multi-opt').append('<ul class="list-unstyled inserted-list">\
<li class="question-item checkbox-item inserted-item">\
<input type="checkbox" id="'+row+'_'+column+'_box1" value="option1">\
<label for="'+row+'_'+column+'_box1" class="checkbox-label control-label">Option 1</label>\
</li>\
<li class="question-item checkbox-item inserted-item">\
<input type="checkbox" id="'+row+'_'+column+'_box2" value="option2">\
<label for="'+row+'_'+column+'_box2" class="checkbox-label control-label">Option 2</label>\
</li>\
<li class="question-item checkbox-item inserted-item">\
<input type="checkbox" id="'+row+'_'+column+'_box3" value="option3">\
<label for="'+row+'_'+column+'_box3" class="checkbox-label control-label">Option 3</label>\
</li>\
</ul>');
});
// Listeners
$('.inserted-item :checkbox', thisQuestion).on('change', function(i) {
var thisCell = $(this).closest('.answer-item');
var values = [];
$('.inserted-item :checkbox:checked', thisCell).each(function(i) {
values.push($(this).val());
});
$('input:text', thisCell).val(values);
});
// Returning to page
$('.with-multi-opt input:text', thisQuestion).each(function(i) {
var thisCell = $(this).closest('.answer-item');
var inputValues = $.trim($(this).val());
if(inputValues != '') {
console.log(inputValues);
var prevValues = inputValues.split(',');
$.each(prevValues, function(i, val) {
$('.inserted-item :checkbox[value="'+val+'"]', thisCell).prop('checked', true);
});
}
});
// Clean-up styles
$('.inserted-list', thisQuestion).css({
'margin': '0',
});
$('.inserted-list li', thisQuestion).css({
'margin': '5px 0 -5px 0',
'padding': '0 0 0 20px',
'text-align': 'left'
});
$('.with-multi-opt input:text', thisQuestion).css({
'position': 'absolute',
'left': '-9999em'
});
}
});
</script>
