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);
}
})
Check/Uncheck Button
+1
+46Hello 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!
+1Quick 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?
+46Hello 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!
+1Hi 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?
+46I have ran the code on my end and it's working !
You might have missed to replace some of "this" with actual "QID"
+1Hi 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.
+46Hello 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!
+1Hi 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?
+46KH_2022
If you are including new buttons you need to change the button ID
In our case it is button1 & button2
Hope this helps!
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.
+29Hi 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.
<i><button id="button1">Select All</button></i><i><button id="button2">Clear All</button></i>
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.