Complex Grid: Select All / Select One - Item must be selected in both columns

This article will help you create a Complex Grid with a Select All in one column and Select One in the other. The item must be selected in both columns. 


Background 

You may need to have an exercise where you have a select all that apply in one column and a select one in the other. You most likely may also need to make sure that the same item must be selected in both columns.  

Click here to see an example


Complex Grid: Select All / Select One - Item must be selected in both columns

NOTE: This ONLY supports Radio Row formatting 

  1. Add a 'Complex Grid' question to your survey
  2. Add your question text as needed.
  3. Type and/or paste in your response level attributes starting in Row 1 
  4. Delete column 3 as you will not need it. To do so:
    1. Click on column labeled number 3 to select the entire column
    2. Click on the vertical ellipses 
    3. Click on the 'Delete column' 
    4. The result will be the following. 
  5. Add your column header text in both columns
  6. Create your Checkbox sub-question within the Complex Grid. To do this: 
    1. Highlight the cells where you want the checkboxes to appear. Make sure NOT to select the header column
    2. Select the 'Add Question' icon 
    3. Select 'Checkbox items' 
    4. Your checkbox column should look something like this: 
  7. Create your Radio sub-question within the Complex Grid. To do this: 
    1. Highlight the cells where you want the Radio buttons to appear. Make sure NOT to select the header column
    2. Select the 'Add Question' icon 
    3. Select 'Radio items' 
    4. Your radio column should look something like this: 
  8. Add the following to the 'ADD JAVASCRIPT' section of your question
    jQuery("input[type='checkbox']").each(function()
    {
    var jElem = jQuery(this);
    var checked = jElem.prop('checked');
    if (!checked)
    {
    jElem.parents("tr").first().find("input[type='radio']").prop("disabled", true);
    }
    });
    jQuery("input[type='checkbox']").change(function(evt)
    {
    var jElem = jQuery(evt.currentTarget);
    var checked = jElem.prop('checked');
    var radio = jQuery(evt.currentTarget).parents("tr").first().find("input[type='radio']");
    radio.prop("disabled", !checked);
    if (!checked)
    {
    radio.prop("checked", false);
    }
    else
    {
    if (jElem.hasClass("cm-exclusiveResponse"))
    {
    jQuery(evt.currentTarget).parents("table").first().find("input[type='radio']").prop(
    {
    "checked": false,
    "disabled": true
    });
    jQuery(evt.currentTarget).parents("tr").first().find("input[type='radio']").prop(
    {
    "disabled": false,
    "checked": true
    });
    }
    else
    {
    jQuery("input[type='checkbox'].cm-exclusiveResponse").each(function()
    {
    jQuery(this).parents("tr").first().find("input[type='radio']").prop(
    {
    "checked": false,
    "disabled": true
    });
    });
    }
    }
    });
    	
  9. Add the following to the 'ADD CSS' section of your question
    /* HELP RENDER GRID BETTER IN CODEBOOK TO HELP QA */
    TD.cm-grid-colid, TD.cm-grid-rowid, .cm-codebook {
        width: auto;
    }
    	
  10. As always, make sure to test and confirm everything looks the way you intend
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us