Scroll

Deselect radio input buttons using JavaScript

Deselect radio input buttons using JavaScript

Follow
Summary This article will demonstrate how you can deselect a radio button on a web screen
Applies to Design ; Web ; Screens
Written for Script Writers ; Survey Designers
Keywords design ; radio ; input ; button ; tick ; untick ; deselect ; select ; java ; script ; javascript ; web ; screen

 

Attached is a 5.4.9 example QEX with this script and a few merged variables.

 

Who is this article for?

We've been asked by a few clients in the past if it's possible to deselect a single-punch radio button.

Why? These clients run several merged screens worth of single-punch variables, and they need to allow their respondents the ability to deselect their answers if the questions allow for DKs.

You could technically change the variable to a multi-punch and set every response as "exclusive", but then this poses another problem when it comes to analyzing the data (if your clients want to see only single-punch data and not multi-punch data, meaning you'll need to recode all of your multi-punch variables back into single-punches).

 

The technicals:

By default, when you use a single-punch variable, the HTML code that is generated on the page uses the HTML <input type="radio"> control. This control has a DOM attribute event called "checked". In every modern browser, this input cannot be unticked normally. This is not an Askia limitation; it's simply how the "radio" control functions according to the default HTML web standards.

You can read more about all of the different properties of the "radio" control here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio

Fortunately, using a little JavaScript, we can toggle this DOM "checked" event to be either "true" or "false".

 

Caution #1:

This should work with any of Askia's new ADPs (Matter, One, and Chroma) that have the "Additional HTML for Footer section" option, but it will not work with ADCs.

To be more specific, the Statements and StatementsOther ADC controls do not use standard <input type="radio"> HTML code, so the below script will not work for those controls.

 

The script:

<script>
$(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);
});

});

});
});
</script>

 

How:

There are two preferred placements:

1) you can use it on a single screen by inserting it into a label, like so:

DeselectRadio_1_.png

or

2a) if you're using legacy internet options, you can insert it into the <footer> of the survey so it can be used across all screens (Options > Internet Options > Header/Footer > Footer), like so:

DeselectRadio_2_.png

2b) if you're using an ADP, you'll need to shrink/minify the code to fit all on a single line (I used https://jscompress.com/), and then paste it into the (Options > Internet Options > ADP properties > Additional HTML for Foot section):

<script>$(document).ready(function(){$(function(){function i(t){var n=t.target;r=$(n).attr("checked")}var r,t=$("input[type=radio]");$.each(t,function(t,n){var e=$("label[for="+$(this).attr("id")+"]");$(this).bind("mousedown keydown",function(t){i(t)}),e.bind("mousedown keydown",function(t){t.target=$("#"+$(this).attr("for")),i(t)}),$(this).bind("click",function(t){!function(t){if("keypress"==t.type&&32!=t.charCode)return;var n=t.target;r?$(n).attr("checked",!1):$(n).attr("checked",!0)}(t)})})})});</script>

DeselectRadio_3_.png

 

Caution #2:

When using "During" routing on a merged screen, the value of the selected variable is still present while on that screen; please be careful when using "During" routing to evaluate "Only Ask If / Do Not Ask" routings on that screen when using this script.

See GIF of a demonstration of what you should be aware of:

Deselect_SinglePunch_During_Value.gif

In my example, the value "1" is set on the variable during that screen. If it is unticked once you submit past that page, it will not be stored in the variable, so your data should still be valid.

 

 

Attached is a 5.4.9 example QEX with this script and a few merged variables.

If you have any questions, please reach out to Support: support@askia.com 

Have more questions? Submit a request

Comments