- Posts: 57
- Thank you received: 4
Welcome to the LimeSurvey Community Forum
Ask the community, share ideas, and connect with other LimeSurvey users!
Making deselectable radio buttons
- cshaw
- Topic Author
- Offline
- Senior Member
Radio buttons aren't very flexible when you are delivering a survey. Once any one of the elements of a default set in html is selected, you must select one of the choices. Period.
Make deselectable buttons instead:
Start with a new survey using a copy of the default template, actually these procedures will work with most of the templates in LimeSurvey.
In the LimeSurvey presentation and navigation options for the new survey, select "Yes" for show "No answer".
In the template copy modify the javascript file, template.js. Add the following script funcitons, hideNoAnswerRadio(), clickRadio() and a document.ready():
/************************************************************ * Hide any existing "no answer" options, let it be a behind * the scenes default. ************************************************************/ function hideNoAnswerRadio(){ var radioset, hiddeninput ; if ($('li.noanswer-item input').length>0){ // hide the the 'No answer' option $('li.noanswer-item').css('display','none'); $('li.noanswer-item input').attr('value','N'); // for each No answer option on the page // you could also just set the default to "No answer" $('li.noanswer-item input').each(function(){ // find the hidden input for this radio button set hiddeninput =$(this) .parents('td.answer') .find('input[type="hidden"]'); if ( $(hiddeninput).val() === "" ){ // no selection for this radio button set // answer container, drill down to find radio button inputs radioset = $(hiddeninput).parent('td.answer'); $(radioset) // "no answer" is the checked item .find('input[value="N"]') .attr('checked','true'); $(hiddeninput) // make radio set "no answer" .attr('value','N'); } }); } } /************************************************************ * If an already selected radio button is clicked, it * becomes UNSELECTED and the hidden "No Answer" item is * selected. To keep track of what was last selected * the 'oldval' is stored in the hidden input element for the * radio button set. ************************************************************/ function clickRadio (ctrl) { // radioset hidden input element var hiddeninput =$(ctrl) .parents('td.answer') .find('input[type="hidden"]'); if ( $(hiddeninput).attr('oldval') === $(ctrl).val() ) { // button selected again if it matches the oldval var radioset = $(hiddeninput) // radio button set .parent('td.answer'); $(radioset) // remove checked attribute to uncheck all radio buttons in set .find('input') .removeAttr('checked'); $(hiddeninput) // set hidden input to "no answer" .attr('checked','true') .attr('value','N') .removeAttr('oldval'); } else { $(hiddeninput) .attr('oldval',$(ctrl).val()); // keep a copy of the item selected for next time something is clicked } } // clickRadio $(document).ready(function(){ hideNoAnswerRadio(); $('input.radio').click(function(){ clickRadio(this); }); });
Deselectable Radio Buttons on Survey
- jelo
- Offline
- Platinum Member
- Posts: 5070
- Thank you received: 1263
Since I don't like global way of setting "No answer" in "presentation and navigation options" I always set this to "No".
Let's if that be made without using the "No answer" option globally.
Does anybody know a website which uses deselectable radiobuttons in forms?
The meaning of the word "stable" for users
www.limesurvey.org/forum/development/117...ord-stable-for-users
- Bigred01
- Offline
- Premium Member
- Posts: 88
- Thank you received: 33
- tpartner
- Offline
- LimeSurvey Community Team
- Posts: 10611
- Thank you received: 3690
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
- cshaw
- Topic Author
- Offline
- Senior Member
- Posts: 57
- Thank you received: 4
Personally I find having a "No answer" selection on the screen, a bit ugly. The study manager I work with agrees with me. So given our bias and the fact that our surveys are typically administered on an iPad in the clinic during an appointment where we can intervene if there is confusion, we thought we would go ahead and test it out.
Also, on live surveys I don't use the default radio button styles, IMO they appear too small on the iPad when you are working with older populations, so I replace them with graphics. That may help with the user not overly expecting the standard radio button behaviour.
If I have time later today I will share the code involved, the caveat being I am fairly new to JS and jQuery so my code tends to be a bit awkward as I struggle with elegance in those technologies.
Suggestions on how to improve the look of my code are quite welcome, I know about programming in a "pythonic" way, but I have yet to find something similar for javascript/jQuery.
- Maverick87Shaka
- Offline
- Senior Member
- Posts: 62
- Thank you received: 3
ohvelma wrote: Background:
Radio buttons aren't very flexible when you are delivering a survey. Once any one of the elements of a default set in html is selected, you must select one of the choices. Period.
Make deselectable buttons instead:
Start with a new survey using a copy of the default template, actually these procedures will work with most of the templates in LimeSurvey.
In the LimeSurvey presentation and navigation options for the new survey, select "Yes" for show "No answer".
In the template copy modify the javascript file, template.js. Add the following script funcitons, hideNoAnswerRadio(), clickRadio() and a document.ready():
Code:/************************************************************ * Hide any existing "no answer" options, let it be a behind * the scenes default. ************************************************************/ function hideNoAnswerRadio(){ var radioset, hiddeninput ; if ($('li.noanswer-item input').length>0){ // hide the the 'No answer' option $('li.noanswer-item').css('display','none'); $('li.noanswer-item input').attr('value','N'); // for each No answer option on the page // you could also just set the default to "No answer" $('li.noanswer-item input').each(function(){ // find the hidden input for this radio button set hiddeninput =$(this) .parents('td.answer') .find('input[type="hidden"]'); if ( $(hiddeninput).val() === "" ){ // no selection for this radio button set // answer container, drill down to find radio button inputs radioset = $(hiddeninput).parent('td.answer'); $(radioset) // "no answer" is the checked item .find('input[value="N"]') .attr('checked','true'); $(hiddeninput) // make radio set "no answer" .attr('value','N'); } }); } } /************************************************************ * If an already selected radio button is clicked, it * becomes UNSELECTED and the hidden "No Answer" item is * selected. To keep track of what was last selected * the 'oldval' is stored in the hidden input element for the * radio button set. ************************************************************/ function clickRadio (ctrl) { // radioset hidden input element var hiddeninput =$(ctrl) .parents('td.answer') .find('input[type="hidden"]'); if ( $(hiddeninput).attr('oldval') === $(ctrl).val() ) { // button selected again if it matches the oldval var radioset = $(hiddeninput) // radio button set .parent('td.answer'); $(radioset) // remove checked attribute to uncheck all radio buttons in set .find('input') .removeAttr('checked'); $(hiddeninput) // set hidden input to "no answer" .attr('checked','true') .attr('value','N') .removeAttr('oldval'); } else { $(hiddeninput) .attr('oldval',$(ctrl).val()); // keep a copy of the item selected for next time something is clicked } } // clickRadio $(document).ready(function(){ hideNoAnswerRadio(); $('input.radio').click(function(){ clickRadio(this); }); });
Deselectable Radio Buttons on Survey
I know this is a very old post, but I need the same function now with the current 2.50+ build.
There is any chance to insert the deselectable radio buttons in the array question type? I'm also looking to insert the code only for one question, without change the code inside the template, Anyone know how to do this?
- tpartner
- Offline
- LimeSurvey Community Team
- Posts: 10611
- Thank you received: 3690
www.limesurvey.org/forum/can-i-do-this-w...heckbox-style#138890
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
- Maverick87Shaka
- Offline
- Senior Member
- Posts: 62
- Thank you received: 3
Yes finally I'm using the other solution, thanks again!tpartner wrote: Does this workaround address your issue?
www.limesurvey.org/forum/can-i-do-this-w...heckbox-style#138890