Javascript hide row within matrix question

Hi Florian_Klostermeier

this should work:
Qualtrics.SurveyEngine.addOnReady(function()
{
this.questionclick = function(event,element)
  {
    //by default you get the click event as the first parameter and the clicked element as the second parameter
    console.log(event, element);
    if (element.type == 'radio')
    {
     
if(element.id.split('~')[2] == 3 && element.id.split('~')[3] == 2){
console.log(document.getElementById('header~' +this.questionId +'~5').parentElement)
document.getElementById('header~' +this.questionId +'~5').parentElement.hide()
}else if(element.id.split('~')[2] == 3 && element.id.split('~')[3] !=2 ){ //show if anyother choice is selected in the respective row

document.getElementById('header~' +this.questionId +'~5').parentElement.show()
}

       
    }
  }

with element.id.split('~')[2] == 3 being the third row
element.id.split('~')[3] == 2) being the second answer option
you will need the else if part if the row should be shown when any other choice in the row is selected
Mind you obviously need to change the row and choice according to your need

Best regards

Rudi

Hi Rudi,
first of all: Thank you very much for your quick reply. Not sure if I understand this 100%.
How would this syntax look like for the following criteria?
If row 3 answer option 2 is ticked, then
Hide entire row 4

Thank you very much,
Florian

Hi there,

Qualtrics.SurveyEngine.addOnReady(function()
{
this.questionclick = function(event,element)
  {
    //by default you get the click event as the first parameter and the clicked element as the second parameter
    console.log(event, element);
    if (element.type == 'radio')
    {
     
if(element.id.split('~')[2] == 3 && element.id.split('~')[3] == 2){
console.log(document.getElementById('header~' +this.questionId +'~5').parentElement)
document.getElementById('header~' +this.questionId +'~4').parentElement.hide()
}else if(element.id.split('~')[2] == 3 && element.id.split('~')[3] !=2 ){ //show if anyother choice is selected in the respective row
document.getElementById('header~' +this.questionId +'~4').parentElement.show()
}
       
    }
  }

just substitue the 4 for the 5 in my example.

Hi Rudi,
thank you very much, but somehow it doesn't work.
Do I need to further adapt this script to my question, e. g. in terms of actual element IDs? Or is this script using the actual row instead of the ID? Because the 2nd option in my 3rd line has the following id "QR~QID30~2~43".
The matrix question also uses groups. Does this affect the script?

Thank you very much,
Florian

Hi Florian,

would you please let me know the ids of

1. the id of the element you need to select


2. the id of the element to hide ?

Hi Rudi,
sorry that I am not able to be more helpful :(
The big issue with this question is that we have changed it over the course of time, so the rows/ columns are not perfectly labeled.
(1) The element I need to select:
Version a: Unhide the following row (in b) if the one of the following elements is being ticked:
QR~QID30~19~42 OR QR~QID30~19~43 OR QR~QID30~19~44 OR QR~QID30~19~46
Version b: Hide the row (in b) if this option is selected
QR~QID30~19~47

(2) The row I want to hide/ unhide:
QR~QID30~1~42 (this is just the first option within this row. The label-element of this row has the following id: header~QID30~3

Thank you very much,
Florian

//hide row if QR~QID30~19~47 is selected
if(element.id.split('~')[2] == 19 && element.id.split('~')[3] == 47)
{
console.log(document.getElementById('header~' +this.questionId +'~3').parentElement)
document.getElementById('header~' +this.questionId +'~3').parentElement.hide()
}
//show if anyother choice is selected in the respective row
else if((element.id.split('~')[2] == 19 && element.id.split('~')[3] == 42) || (element.id.split('~')[2] == 19 && element.id.split('~')[3] == 43 )|| (element.id.split('~')[2] == 19 && element.id.split('~')[3] == 44)||((element.id.split('~')[2] == 19 && element.id.split('~')[3] == 46)))
{
document.getElementById('header~' +this.questionId +'~3').parentElement.show()
}
Hi Florian_Klostermeier
could you please try this?

Best regards

Rudi