为什么需要双击单选按钮来取消选中而不是单击

Question

我正在使用 2 组单选按钮，我们称之为 1.1 1.2 和 2.1 2.1（始终选中第二组的一个单选按钮，取决于第一组中的哪一个被选中，另一个被隐藏）。

我不明白为什么在选中两个单选按钮时我需要双击单选按钮来取消选中它。我只想单击一次以“取消选中”它。

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>

Answer 1

---

警告

我们不建议您采用这种方法，因为它破坏了单选按钮的标准用户体验。

---

您的问题是因为您将checkedradio 重新用于两个检查。

所以：

• 点击组 A.1 - 设置checkedradio = A.1
• 再次单击组 A.1，工作正常并取消选中
• 点击组 A.1 - 设置checkedradio = A.1
• 点击组 B.1 - 设置checkedradio = B.1
• 单击组 A.1（选中）- 它不是 A.1，因此似乎不起作用，设置 checkedradio = A.1
• 第二次点击A.1组，正常

您需要为每个组使用不同的变量。

由于多个变量很快就会变得非常混乱（并且很多 DRY），您可以使用数组：

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">

基于this answer 的代码扩展为使用数组。

Answer 2

我能够根据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>