Blog

Our survey provisioning team knows some pretty cool tricks to customize survey behaviour at run-time. Javascript is our tool of choice for tweaking behaviour, and here's an example that might be useful if you have a long multiple choice list, and wish there was a "Select All" option.

While we don't currently have a configuration option to enable this, it can be accomplished with a little bit of Javascript magic. Here's what you need to do...

1. Edit your question.
2. Scroll down to the Advanced settings panel, and expand it.
3. Scroll down until you see the heading "Script" -- if you don't see it -- submit a support ticket and ask for this feature to be enabled
4. Copy and paste the JavaScript (provided under the video below) into the box to the right of "Javascript for this question"
5. Save your question.
6. On the Question summary page, click on "Edit subquestions"
7. Add a final question with text like "Select All" (it doesn't matter what your text is -- the script just checks to see if the last option in your list is selected, and if so, all options will be selected).

Here's a short video review of the above:

HICS - Multiple Choice Select All Workaround from Hosted in Canada Surveys on Vimeo.

Copy and paste the following script as described in Step #4 above:

	$(document).on('ready pjax:complete',function() {
 
		// Identify this question
		var thisQuestion = $('#question{QID}');
 
		// Initial states
		if($('input[type="checkbox"]:last', thisQuestion).is(':checked')) {
			$('input[type="checkbox"]', thisQuestion).not(':last').prop('checked', true).prop('disabled', true);
		}
 
		// Listener on the last checkbox
		$('input[type="checkbox"]:last', thisQuestion).on('change', function(e) {
			if($(this).is(':checked')) {
				$('input[type="checkbox"]', thisQuestion).not(this).prop('checked', true).prop('disabled', true);
			}
			else {
				$('input[type="checkbox"]', thisQuestion).not(this).prop('checked', false).prop('disabled', false);
			}
 
			// Fire Expression Manager
			$('input[type="checkbox"]', thisQuestion).not(this).each(function(i) {
				checkconditions(this.value, this.name, this.type);
			});
		});
 
		// Re-enable checkboxes so data gets stored
		$('#moveprevbtn, #movenextbtn, #movesubmitbtn').on('click', function(){
			$('input[type="checkbox"]', thisQuestion).prop('disabled', false);
		});
	});