Radio and Checkbox: Buttonized Responses

This article will help you create a Buttonized Radio or Checkbox exercise


Buttonized Radio & Checkbox Questions

This code will allow you to style a 'Radio' question and/or a 'Checkbox' question so that you remove the radio buttons and/or checkboxes and convert the responses themselves into buttons

Click here to see an example (Radio)

Click here to see an example (Checkbox)


Instructions

  1. Add a Radio question type to your survey with all of the appropriate responses
    1. See article: Add a Question: Radio items (Single Select)
    2. See article: Add a Question: Checkbox (Multi-select)
  2. Add the code below to your 'ADD JAVASCRIPT'. 
    1. See article: Adding JavaScript and/or CSS to a Question
      jQuery(".cm-response-container input[type='checkbox']").change(function()
      		{
      			if (jQuery(this).is(":checked"))
      			{
      				if (jQuery(this).hasClass("cm-exclusiveResponse"))
      				{
      					jQuery(".cm-response-container").removeClass("selectedElem");
      					jQuery(".cm-response-container").find(".cm-radio-label-text").removeClass("selectedElem");
      					jQuery(".cm-response-container").find(".cm-other-specify").css("background-color", "white");
      				}
      				else
      				{
      					jQuery(".cm-exclusiveResponse").parents(".cm-response-container").removeClass("selectedElem");
      					jQuery(".cm-exclusiveResponse").parents(".cm-response-container").find(".cm-radio-label-text").removeClass("selectedElem");
      					jQuery(".cm-exclusiveResponse").parents(".cm-response-container").find(".cm-other-specify").css("background-color", "white");
      				}
      				jQuery(this).parents(".cm-response-container").addClass("selectedElem");
      				jQuery(this).parents(".cm-response-container").find(".cm-radio-label-text").addClass("selectedElem");
      				jQuery(this).parents(".cm-response-container").find(".cm-other-specify").css("background-color", "#fff");
      			}
      			else
      			{
      				jQuery(this).parents(".cm-response-container").removeClass("selectedElem");
      				jQuery(this).parents(".cm-response-container").find(".cm-radio-label-text").removeClass("selectedElem");
      				jQuery(this).parents(".cm-response-container").find(".cm-other-specify").css("background-color", "white");
      			}
      		});
      
      
      				jQuery(".cm-response-container input[type='radio']").change(function()
      		{
      			if (jQuery(this).prop("checked"))
      			{
      				jQuery(this).parents(".cm-response-container").addClass("selectedElem");
      				jQuery(this).parents(".cm-response-container").find(".cm-radio-label-text").addClass("selectedElem");
      				jQuery(this).parents(".cm-response-container").find(".cm-other-specify").css("background-color", "#ffffff");
      				jQuery(this).parents(".cm-response-group").find("input[type='radio']:not(:checked)").parents(".cm-response-container").removeClass("selectedElem");
      				jQuery(this).parents(".cm-response-group").find("input[type='radio']:not(:checked)").parents(".cm-response-container").find(".cm-radio-label-text").removeClass("selectedElem");
      				jQuery(this).parents(".cm-response-group").find("input[type='radio']:not(:checked)").parents(".cm-response-container").find(".cm-other-specify").css("background-color", "#fff");
      			}
                        
      		});
      		
  3. Add the code below to your 'ADD CSS'. 
    1. See article: Adding JavaScript and/or CSS to a Question
    2. The notated areas control the corresponding background colors. You can update these as well as any other fields as needed
      .cm-checkbox-label-container,
      .cm-radio-label-container {
        width: 100%;
        padding-top: .5em;
        padding-bottom: .5em;
        text-align: left;
      }
      .cm-radio-input-container,
      .cm-checkbox-input-container {
        display: none !important;
      }
      input[type=text] {
        color: #000000 !important;
      }
      /* RESPONSE LIST - DEFAULT */ 
      .cm-response-container {
          margin-bottom: .6em;
          border-radius: 4px;
          border: 1px solid #eee;
          text-align: left !important;
          box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
          border: 1px solid #bbb;
          background-color: #f8f8f8; /* BACKGROUND COLOR - DEFAULT */
      }
      /* RESPONSE LIST - HOVER */ 
      .cm-response-container:hover {
          border: 1px solid #aaa;
          background-color: #f0f0f0;  /* BACKGROUND COLOR - HOVER*/
      }
      /* RESPONSE LIST - SELECTED */
      .selectedElem {
        background-color: #61A60E !important;  /* BACKGROUND COLOR - SELECTED */
        color: #ffffff !important; 
      }
      /* other specify spacing */
      .cm-other-specify-container {
          margin-top: 0em !important;
      }
      		
  4. Make sure to test!

  • NOTE
    • This code works as is in both V1 and V2 themes
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