How to double click on radiobutton to uncheck instead of one click

Question

I'm using 2 groups of radio buttons lets call it 1.1 1.2 and 2.1 2.1 (one radio button of the second group is always checked, depending on which one of the first group is checked, the other one is hidden).

I can't understand why I need to make a double click on the radio button to uncheck it when both radio buttons are checked. I want to click just one time to "uncheck" it.

function show() {
  swich();
}

function swich() {
  $('input[type="radio"]').change(function(){
    $('[data-group="' + $(this).data('group') + '"]').prop('checked', this.checked);
  });
}

var checkedradio = false;

var radioState = [];

$("input[type=radio]").on('click', function(e) {

  if (radioState[this.name] === this) {
      this.checked = false;
      radioState[this.name] = null;
  } else {
      radioState[this.name] = this;
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input data-group="A" id="radio1" required type="radio" value="Yes" name="group1">

<input data-group="B" id="radio2" required type="radio" value="No" name="group1">

<div id="someId1">
  <input data-group="A" id="radio3" type="radio" name="group2" value="Yes" onclick="show()">
</div>

<div id="someId2">
  <input data-group="B" id="radio4" type="radio" name="group2" value="No" onclick="show()">
</div>

freedomn-m · Answer 1 · 2022-01-14T11:47:59.273

CAVEAT

We do not recommend you take this approach as it breaks the standard UX for radio buttons.

Your issue is because you re-use checkedradio for both checks.

So:

click group A.1 - sets checkedradio = A.1
click group A.1 again, works ok and unchecks
click group A.1 - sets checkedradio = A.1
click group B.1 - sets checkedradio = B.1
click group A.1 (checked) - it's not A.1, so doesn't appear to work, set checkedradio = A.1
click group A.1 2nd time, works ok

You need a different variable for each group.

As multiple variables become very messy very quickly (and lots of DRY), you can use an array:

var radioState = [];

$(":radio").on('click', function(e) {
  //console.log(radioState[this.name])
  if (radioState[this.name] === this) {
    this.checked = false;
    radioState[this.name] = null;
  } else {
    radioState[this.name] = this;
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input required type="radio" value="Yes" name="group1">
<input required type="radio" value="No" name="group1">
<hr/>
<input type="radio" name="group2" value="Yes">
<input type="radio" name="group2" value="No">

Code based on this answer expanded to use an array.

I think you're right its the nested event listeners that cause the problem -like you mentioned before — Hub, Jan 14 '22 at 14:26

score 0 · Answer 2 · answered Jan 15 '22 at 14:18

I was able to achieve the desired result based on this code.

function show() {
  swich();
}

function swich() {
  $('input[type="radio"]').change(function(){
    $('[data-group="' + $(this).data('group') + '"]').prop('checked', this.checked);
  });
}

function toggleRadio(event)
{
    if(event.target.type === 'radio' && event.target.checked === true)
    {
        setTimeout(()=>{ event.target.checked = false; },0);
    }
}
document.addEventListener('mouseup', toggleRadio);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input data-group="A" id="radio1" required type="radio" value="Yes" name="group1">

<input data-group="B" id="radio2" required type="radio" value="No" name="group1">

<div id="someId1">
  <input data-group="A" id="radio3" type="radio" name="group2" value="Yes" onclick="show(this)">
</div>

<div id="someId2">
  <input data-group="B" id="radio4" type="radio" name="group2" value="No" onclick="show(this)">
</div>

A good answer will always include an explanation why this would solve the issue, so that the OP and any future readers can learn from it. — Tyler2P, Jan 15 '22 at 15:25

How to double click on radiobutton to uncheck instead of one click

2 Answers2