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);
});
});
