Select all columns in a matrix question | XM Community
Solved

Select all columns in a matrix question

  • 30 May 2023
  • 5 replies
  • 199 views

Badge +2

Hello,

I’ve created a matrix question that allows for multiple answers. I’ve also transposed the question so that the statements are on top and the scale points run vertically on the left side of the matrix.

I’d like to create an option that allows the user to select all of the scale points within a single column because right now there are a lot of scale points. I’d like it so that they can select all the scale points in the column, and then they still have the option to unselect any options that don’t apply. I know this needs to be done in Javascript, but I’m not sure where to begin.

Thanks!

icon

Best answer by Tom_1842 31 May 2023, 15:06

View original

5 replies

Userlevel 7
Badge +27

Hi, I was able to put a button in place that will select each scale point for a given column or row in a matrix by adapting TomG's code here (Reset Matrix). To give it a try, first create a Matrix question and use the Rich Content Editor's HTML/Source view "<>" to update the Question Text with the below:

Click to write the question text<br>
<button class="setall">Set All</button>

Set all answers in a column - Add the below to the question's JavaScript in the OnReady section:

var qobj = this;
var q = jQuery("#"+qobj.questionId);

/*c4 for column 1, c5 for column 2, etc.*/
var inputs = q.find(".c4").find("[type=radio],[type=checkbox]");
q.find(".setall").click(function() {
inputs.each(function() {
var parts = this.id.split("~");
qobj.setChoiceValue(parts[2],parts[3],true);
});
});

Set all answers in a row - Add the below to the question's JavaScript in the OnReady section:

var qobj = this;
var q = jQuery("#"+qobj.questionId);

/*nth child(1) for row 1, nth child(2) for row 2, etc*/
var inputs = q.find("tbody > tr:nth-child(1)").find("[type=radio],[type=checkbox]");
q.find(".setall").click(function() {
inputs.each(function() {
var parts = this.id.split("~");
qobj.setChoiceValue(parts[2],parts[3],true);
});
});

 

Badge +2

Thanks Tom! I tested this out, and it works with one column, but I tried to expand it to more columns (as a test I made three columns), and regardless of which button I press, only the final column will be selected. I thought maybe it was an issue with giving all the buttons the same class name, so I gave them each a unique ID, but the problem persists. This is how I adjusted the code:

 

var qobj = this;
var q = jQuery("#"+qobj.questionId);

/*c4 for column 1, c5 for column 2, etc.*/
var inputs = q.find(".c4").find("[type=radio],[type=checkbox]");
    q.find("#setall1").click(function() {
        inputs.each(function() {
            var parts = this.id.split("~");
            qobj.setChoiceValue(parts[2],parts[3],true);
        });
    });
    

var inputs = q.find(".c5").find("[type=radio],[type=checkbox]");
    q.find("#setall2").click(function() {
        inputs.each(function() {
            var parts = this.id.split("~");
            qobj.setChoiceValue(parts[2],parts[3],true);
        });
    });
    
    
var inputs = q.find(".c6").find("[type=radio],[type=checkbox]");
    q.find("#setall3").click(function() {
        inputs.each(function() {
            var parts = this.id.split("~");
            qobj.setChoiceValue(parts[2],parts[3],true);
        });
    });
 

 

I imagine there’s something in the function on clicking the set all buttons that isn’t selecting the correct columns (i.e. setall1 should select all the answers in column one only, setall2 should select all the answers in column 2 only etc, but at the moment all clicks on any set all button only results in the answers in the final column, column 3, being selected. Does the function on clicking the set all button also need to be adjusted further?

Thank you!

Userlevel 7
Badge +27

jQuery can select multiple elements at once though which can be separated by commas. Try using the below which will select all the options in the first 3 columns:

var qobj = this;
var q = jQuery("#"+qobj.questionId);

/*c4 for column 1, c5 for column 2, etc.*/
var inputs = q.find(".c4, .c5, .c6").find("[type=radio],[type=checkbox]");
q.find(".setall").click(function() {
inputs.each(function() {
var parts = this.id.split("~");
qobj.setChoiceValue(parts[2],parts[3],true);
});
});

 

Badge +2

Thanks for the advice Tom.

Userlevel 7
Badge +27

I have a function, matrixSelectAll, that makes it easy to add a ‘select all’ answer to a matrix. It is compatible with transposed, exclusive answers, position text above, and mobile accordion.

Leave a Reply