How can I make checkboxes in a side by side exclusive | XM Community
Skip to main content

How can I make checkboxes in a side by side exclusive across both sides of the side by side. If user choose 'Answer 1' for 'Statement 1' in 'Column 1', then 'Column 1 - Answer 2' and 'Column 1 - Answer 3' would be unchecked and 'Column 2 - Answer 1', 'Column 2 - Answer 2', 'Column 2 - Answer 3' would also be unchecked.
Screenshot 2023-01-03 at 15.17.05.png

You would need to do this with JavaScript. Use a click handler on the Column 1 - Answer 1 checkboxes.


TomG I am aware that it will require JavaScript or JQuery. I was hoping that someone might have done this previously or that someone could point me to documentation that I can look at to figure it out. Everything that I have tried so far has not worked.


TomG - When I try the code below, the alert says "cid equals undefined". Any idea what I am doing wrong?
Qualtrics.SurveyEngine.addOnload(function()
{
   /*Place your JavaScript here to run when the page loads*/
   var cid;
   jQuery("#"+this.questionId+" inputdtype='checkbox']").on("change",function()
   {
      if (jQuery(this).prop("checked") == true)
      {
         cid = jQuery(this).closest("tr").find(".MC").attr("id");
         alert('cid equals ' + cid);
         jQuery("#" + cid + " inputdtype='checkbox']").not(this).prop("checked", false);
      }
   });
});


jQuery(this).closest("tr").find(".MC").attr("id");
isn't returning anything. I believe it is because there is no element with the class MC in the row.


TomG - Looking at the HTML I see the following for 1 row.


Try this (untested):
Qualtrics.SurveyEngine.addOnload(function() {
   jQuery("#"+this.questionId+" inputptype=checkbox]").click(function() {
      if(this.checked) {
var cb = jQuery(this);
cb.closest("tr").find(""type=checkbox]").not(cb).prop("checked",false);
      }
   });
});


TomG - That works. Thank you very much!!!


Leave a Reply