How to hide/ unhide choices based upon a choice selected in the same question | XM Community
Skip to main content

test.pngI am currently making use of the following code which helps me in hiding and displaying the choices. But I am unable to hide and unselect them if choice 1 is unchecked.
var x= jQuery("#"+this.questionId+" input[choiceid=2]").closest("li").hide();
var y = jQuery("#"+this.questionId+" input[choiceid=3]").closest("li").hide();

this.questionclick = function(event, element) {
    var selectedChoice = this.getSelectedChoices()

    console.log(selectedChoice) //use this to get the value of the choice when you want the textbox to appear
    if (selectedChoice == "1") {
      x.show();
y.show();
alert(selectedChoice);
    }
    else if (selectedChoice == "2") {
      //x.hide();
//y.hide();
alert(selectedChoice+"Else if");
    }
else{
x.hide();
y.hide();
alert(selectedChoice+"Else ");
}
  }

Hi there, if you still need, this can be put in place by creating a Multiple Choice question that is set to Allow multiple answers and giving it 4 choices.
Then, tweaking your code a bit, add the below to the question's JavaScript in the OnReady section:
var qid = this.questionId;

var row2= jQuery("#"+this.questionId+" input[choiceid=2]").closest("li");
var row3 = jQuery("#"+this.questionId+" input[choiceid=3]").closest("li");

row2.hide();
row3.hide();

this.questionclick = function(event, element) {

    var selectedChoice = this.getSelectedChoices()
    console.log(selectedChoice)
    if (selectedChoice.includes("1")) {
      row2.show();
      row3.show();
}else{
      row2.hide();
      row3.hide();
      jQuery("inputid='QR\\~"+qid+"\\~2']").prop('checked',false);
      jQuery("inputrid='QR\\~"+qid+"\\~3']").prop('checked',false);
}

}

The JS function mcSubChoices does this without the need of custom, question specific JS coding.

Leave a Reply


Terms & Conditions