Deselect a Radio Button

Once an answer option has been selected in a Radio Button question browsers do not allow for the option to be deslected. That could be troublesome if it was an accidental click with no Other or N/A options, so here is a quick bit of JavaScript that will allow respondents to click their answer to deselect it! This JavaScript will only work on default radio buttons.

Allow Deselect on a Single Page

1. Click Add New Action, select JavaScript. Copy and paste the code below into the action:

   
   $(document).ready(function() {
   
       $(function() {
           var allRadios = $('input[type=radio]')
           var radioChecked;
   
           var setCurrent =
               function(e) {
                   var obj = e.target;
   
                   radioChecked = $(obj).attr('checked');
               }
   
           var setCheck =
               function(e) {
   
                   if (e.type == 'keypress' && e.charCode != 32) {
                       return false;
                   }
   
                   var obj = e.target;
   
                   if (radioChecked) {
                       $(obj).attr('checked', false);
                   } else {
                       $(obj).attr('checked', true);
                   }
               }
   
           $.each(allRadios, function(i, val) {
               var label = $('label[for=' + $(this).attr("id") + ']');
   
               $(this).bind('mousedown keydown', function(e) {
                   setCurrent(e);
               });
   
               label.bind('mousedown keydown', function(e) {
                   e.target = $('#' + $(this).attr("for"));
                   setCurrent(e);
               });
   
               $(this).bind('click', function(e) {
                   setCheck(e);
               });
   
           });
   
       });
   });
   

2. Under Layout > Layout Options tab, make sure the option to Use Default Browser Icons for Radio Buttons and Checkboxes is checked as this Javascript only works on default browser icons.
3. Test to make sure it works!

Allow Deselect for the entire survey

1. Go to the Style tab.
2. Under Layout > Layout Options, make sure the option to Use Default Browser Icons for Radio Buttons and Checkboxes is checked as this Javascript only works on default browser icons.
3. Scroll to the bottom of the survey preview to access the CSS/HTML Editor. 
4. Go to the Custom HTML tab.
5. Before pasting the code, you need to include an opening tag (the JavaScript action does this step for you). That tag is:
   <script type="text/javascript">
6. Now copy and paste the code from the previous example. Once you've done that, you just need to add a closing tag at the end of the script. That tag is:
   </script>