Creating Single Select Group Titles as Buttons

Use group titles to hide and show Single Select items with JavaScript.
Group Titles as Buttons Animated
Choice Group Titles can be added to the single select choices in WSC, making it easy to group specific choices for respondents. You may have a need to only show one group on the page at a time - this manipulation can be achieved through the use of JavaScript.

It is important to note that the script in this tutorial is designed for surveys that have the back button navigation DISABLED. When a respondent selects a choice in a group, then clicks on a different group title - the previously selected choice will then be UNSELECTED.

This guide will demonstrate step by step how to setup the clickable Group Titles:
  • 1. Add a new Multiple Choice Single Select question to your survey page - add some choices to the question. Ensure the question has a valid Question Access Code.
    Group Titles as Buttons Single Select Question
  • 2. Add some Choice Group Titles. To do this, click on a Selection Choice - then click the Edit Choice button. Enter a title name into the Choice Group Title field.
    Group Titles as Buttons Edit Choice
    Group Titles as Buttons Edit Field
  • 3. Add a new JavaScript script to your survey page, select the "Execute Javascript when Survey Page has Loaded" scripting event.
    Group Titles as Buttons Execute on Page Load
  • 4. Add the script below to the "Javascript to be Executed" section, change the 'SINGLESELECT' access code to match your own Question Access Code:
    /// Create a variable to track the group number attribute
    var nGroupAttribute = 0;

    /// Get the question
    var oQuestion = wscScripting.getQuestionByDataPipingCode('SINGLESELECT');

    /// Loop through the table elements
    $('#' + oQuestion.identity + '_table > tbody > tr').each(function(index, tr) {

         /// Create the button template
         var sButton = '<table cellspacing="0" cellpadding="0" border="0"><tbody><tr><td align="center" class="butt_l_c"><img alt="" src="/images/1pix.gif"></td><td align="center" class="butt_m_c"><a href="#" id="groupbuttonNNNN" group="NNNN" class="butt_m">CHOICETEXT</a></td></tr></tbody></table';

         /// Find if this is a title
         if ($(tr).find('.wsc_radiofield-title').length > 0) {
         if ($(tr).children('td').length > 0) {

         /// Increment the attribute so we can find it

         /// Get the group title text from the span element
         var sText = $(tr).find('span').html();

         /// Replace the button placeholder text with the Group Title text
         var sNewButton = sButton.replace('CHOICETEXT', sText);

         /// Replace the group number attribute in the button template
         sNewButton = sNewButton.replace(/NNNN/g, nGroupAttribute.toString());

         /// Update the table html with the new button template

         /// Adjust the width style
         $('#groupbutton' + nGroupAttribute.toString()).css('width','200px');

         /// Add a click event
         $('#groupbutton' + nGroupAttribute.toString()).on('click', function(e, o) {

         /// Find the attribute group
         var sGroup = $(this).attr('group');

         /// Show the group
         $("tr[groupall='" + oQuestion.identity + "']").hide();
         $("tr[group='" + sGroup + "']").show();

         /// Return false so it doesnt affect the url
         var oSelected = wscScripting.getFirstSelectedChoice(oQuestion);

         if (oSelected != null) {

         /// Make sure the choice is one of the choices in the current group or deselect it
         var bSelected = false;

         $("tr[group='" + sGroup + "'] input").each(function(index, input) {
           var sValue = $(input).val();
           if (sValue == oSelected.identity) {
            bSelected = true;
           if (!bSelected) {
           wscScripting.deselectChoice(oQuestion, oSelected);
         return false;
       else {
       /// Hide groups by default

       /// Add an attribute so we can find them all