In This Article:

    Convert checkboxes to radio buttons

    In This Article:

      Summary

      If you have supporters that are confused by checkboxes, then the same field can be represented by radio buttons. The radio buttons are labeled "Yes" and "No", and make it very easy for your supporters to know what to click.

      Audience:

      • Campaign managers with Javascript experience
      • Developers with Javascript experience
      • Campaign managers without Javascript experience who like a challenge

      Background

      Believe it or not, some supporters get confused by checkboxes. They can't tell if checking the box means yes or no. This script solves that problem by presenting the supporter with radio buttons named "Yes" and "No". Clicking on "Yes" turns "No" off, and clicking on "No" turns "Yes" off.  Here's an example:

      Before the script:

      After the script:

       Yes    No 

      Confusion dispelled!

      Solution

      This script works on all of the radio buttons on a page. If the radio button is checked at the time that this script runs, then the "Yes" button is clicked automatically. If the checkbox is not checked (the default in Salsa), then the "No" button is clicked automatically.

      <style type="text/css">
      .formRow label {
      float: left !important;
      width: 150px;
      }
      .radio_button_box {
      float: left;
      width: 200px;
      }
      .radio_button_box input {
      clear: none;
      float: left;
      }
      .radio_button_box label {
      clear: none;
      float: left !important;
      padding-left: 0px;
      padding-right: 20px;
      width: 20px;
      }
      </style>
      <script type="text/javascript">
      $(function() {
      $('input[type=checkbox]')
      .each(function() {
      var cbName = $(this).attr('name');
      var cbNameNo = cbName + '_no';
      var cbNameYes = cbName + '_yes';
      var checkedNo = $(this).attr('checked') ? "" : " checked";
      var checkedYes = $(this).attr('checked') ? " checked" : "";
      parent = $(this).parent();
      parent.find('input').remove()
      parent.append('<div class="radio_button_box">'
      + '<input type="radio" value="1" name="' + cbName + '" id="' + cbNameYes + '"' + checkedYes + '>'
      + '</input>'
      + '<label for="' + cbNameYes + '">Yes</label>'
      + '<input type="radio" value="0" name="' + cbName + '" id="' + cbNameNo + '"' + checkedNo + '>'
      + '</input>'
      + '<label for="' + cbNameNo + '">No</label>'
      + '</div>'
      + '<div class="clear"></div>');
      });
      });
      </script>

      Installation

      If you want this script to run on only one page, then you can copy all of the code (above) and paste it into an optional field. Probably the best field to use as one named Pre Submit Footer if there is one.

      Another idea is to paste the script into the content or footer on your page, If the content or footer uses the WYSIWYG editor (as most do), then remember to click on the Source button, position past the current contents, and then paste.

      If you what this script to run on more than one page, then you can use these steps:

      1. Choose the template for the pages that you would like this script to run on.
      2. Edit the template.
      3. Locate the </body> tag in the template.
      4. Copy the script (above).
      5. Paste the script into the template before the </body> tag.  When you are done, the </body> tag must be on a line by itself.
      6. Save the template.

      Caution: if you decide to apply this script to all of your templates, then test carefully and thoroughly.  Make sure that the change is compatible with all of your pages.

      But wait, there's more...

      If you like this fix, but

      • you're uncomfortable about installing it yourself,
      • you'd like to have the fix applied to only one page or more than one page and would rather not do that,
      • you'd like to have just some of the checkboxes changed to radio buttons and not all of them,
      • "Yes" and "No" is not quite right for some fields, or
      • the formatting needs to be changed.

      then please get in touch with your Salsa Account Manager. If you need help contacting your Account Manager, or have other questions, then please send mail to support@salsalabs.com, and we'll be glad to help.

      Was this article helpful?
      0 out of 0 found this helpful
      Have more questions? Submit a request

      Comments

      0 comments

      Please sign in to leave a comment.