Welcome to the LimeSurvey Community Forum

Ask the community, share ideas, and connect with other LimeSurvey users!

Deselect Radio Button In Array

  • camino
  • camino's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
4 months 2 weeks ago #253219 by camino
Deselect Radio Button In Array was created by camino
Hello,

I already found several threads in this forum regarding this topic, but non yielded a viable solution for my case. What I need is an easy and flexible javascript solution to make radio buttons in an array deselectable.

I know that is not the 'purpose' of radio buttons and there is a workaround using checkboxes, but the output is more messy then and for this study we want radio buttons. I know, that you can use a reset button, which we do not want to use either. Also using a 'no answer' option is not viable for our study design.

After searching through the web and trying several different approaches, I found this one, which kinda works. The only problem is that when active you can only select the radio buttons by clicking directly onto them (and not by clicking on the answer cell) and by clicking on any answer cell the radio button in that row will become unchecked. Any ideas on how to get this to work properly or maybe different approach to this problem?

Code:
 $(function(){
 var $radios = $('input[type="radio"]');
$radios.click(function () {
  var $this = $(this);
  if ($this.data('checked')) {
    this.checked = false;
  }
  var $otherRadios = $radios.not($this).filter('[name="'
                                               + $this.attr('name') + '"]');
  $otherRadios.prop('checked', false).data('checked', false);
  $this.data('checked', this.checked);
});
});


 

Please Log in to join the conversation.

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
4 months 2 weeks ago #253229 by tpartner
Replied by tpartner on topic Deselect Radio Button In Array
Well, you removed the questions about your LimeSurvey installation so it is difficult for us to help you.

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

Please Log in to join the conversation.

  • camino
  • camino's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
4 months 2 weeks ago #253242 by camino
Replied by camino on topic Deselect Radio Button In Array
Sorry, here is the version:
LimeSurvey version:  LimeSurvey Cloud   Version 6.3.9
Own server or LimeSurvey hosting: Limesurvey Hosting
Survey theme/template: vanilla

Please Log in to join the conversation.

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
4 months 2 weeks ago - 4 months 2 weeks ago #253248 by tpartner
Replied by tpartner on topic Deselect Radio Button In Array
This script, placed in the source of an array question will allow deselecting the radio inputs.
    
   
Code:
<script type="text/javascript" data-author="Tony Partner">
 
    $(document).on('ready pjax:scriptcomplete',function(){
 
        // Identify this question
        var thisQuestion = $('#question{QID}');
 
        // A function to toggle radio inputs
        function toggleRadio(thisCell) {
            if($(':radio:checked', thisCell).length == 0) {
                $(':radio', thisCell).trigger('click');
            }
            else {
                $(':radio:eq(0)', thisCell).prop('checked', false);
                checkconditions('', $(':radio:eq(0)', thisCell).attr('name'), 'radio');
            }
        }
 
        // Listener on the radio inputs
        $(':radio', thisQuestion).on('click', function(e) {
            e.stopPropagation();
        });
 
        // Listener on the array cells
        $('.answer-item', thisQuestion).on('click', function(e) {
            e.stopPropagation();
            toggleRadio(this);
        });
 
        // Listener on the labels
        $('.answer-item label', thisQuestion).on('click', function(e) {
            e.preventDefault();
            e.stopPropagation();            
            toggleRadio($(this).closest('.answer-item'));
        });
    });
</script>

Sample survey attached:  

File Attachment:

File Name: limesurvey...1335.lss
File Size:28 KB

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Last edit: 4 months 2 weeks ago by tpartner.
The following user(s) said Thank You: camino

Please Log in to join the conversation.

  • camino
  • camino's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
4 months 2 weeks ago #253252 by camino
Replied by camino on topic Deselect Radio Button In Array
Thank you, that works perfectly.

Please Log in to join the conversation.

  • camino
  • camino's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
4 months 1 week ago #253425 by camino
Replied by camino on topic Deselect Radio Button In Array
Another question regarding this: what do I need to modify  this code to make work for single item questions with radio buttons (so not in an array)? And there is there any documentation/manual where I can learn to do this on my own? I have rudimentary coding knowledge, but I have often no idea on how to reference specific elements in LimeSurvey.
Best,
Camino

Please Log in to join the conversation.

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
4 months 1 week ago - 4 months 1 week ago #253455 by tpartner
Replied by tpartner on topic Deselect Radio Button In Array
This will work in a list-radio question:

Code:
<script type="text/javascript" data-author="Tony Partner">
 
    $(document).on('ready pjax:scriptcomplete',function(){
 
        // Identify this question
        var thisQuestion = $('#question{QID}');
 
        // Listener on the radio inputs
        $(':radio', thisQuestion).css('left', '-9999em').on('click', function(e) {
            e.stopPropagation();
        });
 
        // Listener on the labels
        $('.answer-item label', thisQuestion).on('click', function(e) {
            e.preventDefault();
            var thisItem = $(this).closest('.answer-item');
            if($(':radio:checked', thisItem).length == 0) {
                $(':radio', thisItem).trigger('click');
            }
            else {
                $(':radio:eq(0)', thisItem).prop('checked', false);
                checkconditions('', $(':radio:eq(0)', thisItem).attr('name'), 'radio');
            }
        });
    });
</script>

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Last edit: 4 months 1 week ago by tpartner.
The following user(s) said Thank You: camino

Please Log in to join the conversation.

Lime-years ahead

Online-surveys for every purse and purpose