Check/Uncheck Button | XM Community
Skip to main content

Hi, I need some help with the javascript code for a check/uncheck button. The code that I have will select all but will not unselect all when clicked again. Please help.
 var questionId = this.questionId;
  var that = this;
  jQuery("#"+questionId+" .QuestionText").append("
");

  jQuery('#Select1').click(function() {
    for (var i = 1; i < 9; i++) {
      that.setChoiceValue(i, true);
    }

})

Hello KH_2022 ,
Try adding below in JS of question:
Qualtrics.SurveyEngine.addOnReady(function()
{
/*Place your JavaScript here to run when the page is fully displayed*/
jQuery("#button1").click(function(){

if(jQuery(this).data('clicked', true))

{

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

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

});

}
{

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

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

});

}

});

});


/*Place your JavaScript here to run when the page is fully displayed*/
jQuery("#button2").click(function(){

if(jQuery(this).data('clicked', true))

{

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

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

});

}
{

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

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

});

}

});

&this in HTML of question:



Hope this helps!


That worked. Thanks so much for your help!!!


Quick follow-up, any clue why it's selecting all check boxes regardless of question? Is there a way to limit the check and uncheck options to only the question in which it is embedded instead of all multiple select questions on the page?


Hello KH_2022
You can change this to actual QID of question you want this to work, as shown below
Qualtrics.SurveyEngine.addOnReady(function()
{
/*Place your JavaScript here to run when the page is fully displayed*/
jQuery("#button1").click(function(){

if(jQuery('[id="QID14"]').data('clicked', true))

{

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

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

});

}
{

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

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

});

}

});

});


/*Place your JavaScript here to run when the page is fully displayed*/
jQuery("#button2").click(function(){

if(jQuery('[id="QID14"]').data('clicked', true))

{

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

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

});

}
{

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

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

});

}

});
Hope this helps!


Hi Deepak ,
Thanks for the recommendation. I updated the code to the specific QID for the question but it's still selecting all boxes on the page regardless of question. Any thoughts on how to address this?


I have ran the code on my end and it's working !
You might have missed to replace some of "this" with actual "QID"


Hi Deepak
Yes, I did replace the code with the specific QID for the items that were listed in the Qualtrics IDs for the survey in my account settings. However, the first question on the page selects all questions on the page. The other buttons are deactivated. I am not able to use them to select or deselect.


Hello KH_2022
you can see in this preview link that the code is working as expected.
Preview - Qualtrics Survey | Qualtrics Experience Management
Not sure where you are facing the issue
If you can paste your code here, that would be great!


Hi Deepak
Thanks for sharing that preview link. The code is the same as what you provided above just with the QID updated. In your preview, you only had the two buttons in your first question. Could you introduce select all and clear all buttons for your second question and see if that makes a difference?


KH_2022
If you are including new buttons you need to change the button ID
In our case it is button1 & button2

Hope this helps!


Deepak That was it! Thanks!!!


Hi Deepak. Thank you for this thread, very helpful. Would it be possible to see the html code needed to create the buttons and link to the java script? Thank you.


Hi Deepak. Thank you for this thread, very helpful. Would it be possible to see the html code needed to create the buttons and link to the java script? Thank you.

@KO_CSR This is the HTML, it’s not under code section so it got loaded as actual buttons

<i><button id="button1">Select All</button></i>
<i><button id="button2">Clear All</button></i>

 


Thank you @dxconnamnguyen ! So much. Exactly what I needed. Many thanks.


Leave a Reply