Question

How to hide/ unhide choices based upon a choice selected in the same question

Forum|Forum|4 years ago
May 6, 2021
2 replies
214 views

+1

AAnuragDAS

I 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 ");
}
  }

+28

Tom_1842
Level 8 ●●●●●●●●
Forum|Forum|2 years ago
February 9, 2023

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("input[id='QR\\~"+qid+"\\~2']").prop('checked',false);
jQuery("input[id='QR\\~"+qid+"\\~3']").prop('checked',false);
}

}