How to implement a "Select All" option for multiple choice questions? | Experience Community
Skip to main content

How to implement a "Select All" option for multiple choice questions?

  • May 24, 2020
  • 10 replies
  • 5084 views

I've got a couple of questions in my survey that have multiple choices check boxes and I would like to implement a "Select All" option so that survey takers don't have to check every box to "select all". See example below:
Edit_Survey_Qualtrics_Survey_Software.png

May 25, 2020

You can modify the code as per your requirement, please refer this code:

Qualtrics.SurveyEngine.addOnReady(function() {     var $q = jQuery("#" + this.questionId);          //This adds the "Select All" button below the question text     $q.find(".QuestionText").append("<br><button type='button' id='SelectAllBtn' style='margin-top: 10px; padding: 5px 10px;'>Select All</button>");

    //This handles the button click     jQuery('#SelectAllBtn').on('click', function(e) {         e.preventDefault(); // Prevents accidental form submission                  //This finds all of the unchecked checkboxes in this specific question and clicks them         $q.find('input[type="checkbox"]:not(:checked)').each(function() {             jQuery(this).click();         });     }); });


**Admin Note: This only works with no Simple Layout Theme and no New Survey Taking Experience** 

 

10 replies

SurajK
QPN Level 3 ●●●
Forum|alt.badge.img+4
  • QPN Level 3 ●●●
  • May 25, 2020

You can modify the code as per your requirement, please refer this code:

Qualtrics.SurveyEngine.addOnReady(function() {     var $q = jQuery("#" + this.questionId);          //This adds the "Select All" button below the question text     $q.find(".QuestionText").append("<br><button type='button' id='SelectAllBtn' style='margin-top: 10px; padding: 5px 10px;'>Select All</button>");

    //This handles the button click     jQuery('#SelectAllBtn').on('click', function(e) {         e.preventDefault(); // Prevents accidental form submission                  //This finds all of the unchecked checkboxes in this specific question and clicks them         $q.find('input[type="checkbox"]:not(:checked)').each(function() {             jQuery(this).click();         });     }); });


**Admin Note: This only works with no Simple Layout Theme and no New Survey Taking Experience** 

 


  • Author
  • May 26, 2020

Hi SurajK, I've actually tried modifying that code but I'm still getting it wrong, probably because I don't have an IT background! Could you please provide a modified code that allows that when the FIRST check box is selected, it selects the rest of the boxes below? MUCH APPRECIATED!
Edit_Survey_Qualtrics_Survey_Software.png


SurajK
QPN Level 3 ●●●
Forum|alt.badge.img+4
  • QPN Level 3 ●●●
  • May 26, 2020

Try the below code if respondent select "Select all" then automatically all of the options get selected.
jQuery('ul li:eq(0)').find('input[type="checkbox"]').change(function(){

if(jQuery(this).is(':checked'))

{

jQuery('ul li:gt(0)').each(function(){

jQuery(this).find('input[type="checkbox"]').prop('checked',true)

});

}

});

But make sure to write the reverse code if respondent unselect any of the other option then "Select all" should also get unselected.
 


Forum|alt.badge.img+4
  • Level 1 ●
  • October 5, 2022

Thank you for this information.
I also am looking to include a Select All option on a multiple choice question so I utilized this code. It did select all the options in that question but it also selected all the options in all the rest of the multiple choice questions in the survey. Does something need to be included to block it from governing outside of this one question?
Also, would it be possible to see this reverse code? I can see how critical that is. Without it, when I deselect some of the options and then submit the survey, they become reselected.
Thank you for whatever help you can provide.


TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • Level 8 ●●●●●●●●
  • October 6, 2022

https://community.qualtrics.com/XMcommunity/discussion/comment/50417#Comment_50417That code (above and in the linked post) has a number of issues including the ones you noted. You might be interested in the mcSelectAll function.


Forum|alt.badge.img+4
  • Level 2 ●●
  • August 14, 2023

Hi @TomG - thanks for this. How would you go about amending the javascript for a side-by-side question? In my case, I would only want to apply this to one column in my SBS question… thanks!


Forum|alt.badge.img
  • November 3, 2023

@SurajK

So I tried the JS in your comment and it works when I preview the question, however when I preview my survey or actually take the survey, the answers do not get all selected. 

 

I even reversed the code like you suggested and the deselect works as well but again only when I preview the question. I’ve tried the “mcSelectAll” JS but it doesn’t work at all.

 

Here is the JS I used for both selecting all and deselecting all

Query('ul li:eq(0)').find('input[type="checkbox"]').change(function(){

if(jQuery(this).is(':checked'))

{

jQuery('ul li:gt(0)').each(function(){

jQuery(this).find('input[type="checkbox"]').prop('checked',true)

});

jQuery('ul li:eq(0)').find('input[type="checkbox"]').change(function() {

  if (!jQuery(this).is(':checked')) {

    jQuery('ul li:gt(0)').each(function() {

      jQuery(this).find('input[type="checkbox"]').prop('checked', false);

    });

  }

});

 

Any thoughts or suggestions?


Umang Upadhyay
QPN Level 4 ●●●●
Forum|alt.badge.img+31
  • QPN Level 4 ●●●●
  • January 10, 2024

Do we have a way to get this output? option so that survey takers don't have to check every box to "select all"


TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • Level 8 ●●●●●●●●
  • January 10, 2024

@Umang Upadhyay,

mcSelectAll does this. @JHill never contacted me to get the code, so couldn’t have tried it.


Forum|alt.badge.img

@TomG I sent you a message to use the code. Please check!