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
- 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); }); }); }); });
- 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.
- Test to make sure it works!
Allow Deselect for the entire survey
- Go to the Style tab.
- 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.
- Scroll to the bottom of the survey preview to access the CSS/HTML Editor.
- Go to the Custom HTML tab.
- 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">
- 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!
Admin
— Dave Domagalski on 04/22/2016
@Jacob: Thank you so much for exploring our Documentation!
While this specific example script does not take logic into account, it could likely be modified to do so. I'm sorry to say that we do not currently have an example script for the specific scenario that you described, but I will take note to update this document should an example referencing your use case become available.
As this script is ultimately overriding the default functionality of a specific input type, there are other options for addressing this challenge.
One suggestion is to include an opt out option (such as N/A) into your radio button question. This would allow respondents to opt out of the question if they needed to update an answer or if they had accidentally answered the question.
I hope this is helpful!
Thank you again for exploring SurveyGizmo Documentation for your great question!
David Domagalski
Survey Explorer
SurveyGizmo Customer Support
— Jacob on 04/21/2016
First off, great script! Second, is there anyway to have the question logic react to it? For example I have trailing questions that work off the radio button and when I deselect the option the question that has logic applied is still showing. Thanks!