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>

Scripting and Other Custom Solutions

We’re always happy to help you debug any documented script that is used as is. That said, we do not have the resources to write scripts on demand or to debug a customized script.

If you have customization ideas that you haven't figured out how to tackle, we're happy to be a sounding board for SurveyGizmo features and functionality ideas that might meet your needs. Beyond this, check out our Professional Services; these folks have the scripting chops to help you to achieve what you are looking for!

Basic Standard Market Research HR Professional Full Access Reporting
Free Individual Team & Enterprise
Feature Included In