Question

我有一个单选按钮，默认情况下会在页面加载时进行检查，用户可以通过单击取消选中，但单击时不能正常工作..三次单击单选按钮un_checked后。请参阅 JSFIDDLE。在代码中，默认情况下检查值为7的单选按钮，我可以通过单击三次取消选中它。有任何方法只需单击即可取消选中。任何帮助表示赞赏。谢谢。

<td style="padding-right:0px;"><input type="radio" name="TEST" onclick=" var allRadios = document.getElementsByName('TEST'); var booRadio; var x = 0; for(x = 0; x < allRadios.length; x++){   allRadios[x].onclick = function() {     if (booRadio == this) {       this.checked = false;       booRadio = null;     }else{       booRadio = this;     }   }; }" value="7" CHECKED> 7</td>

Answer 1

首先，我希望这只是一个测试，并且您不会在HTML中嵌入事件，因为这将非常难以快速管理。我设法让一个版本使用一些改进的JavaScript。虽然我没有长时间玩这个，但我怀疑有更好的方法，但这是一个很好的初稿，可以得到你想要的结果：https://jsfiddle.net/0kyyfvy6/5/

var radioElements = document.querySelectorAll('input[type=radio]');

for (var iterator = 0; iterator < radioElements.length; iterator++) {
    var radioElement = radioElements[iterator];
  radioElement.addEventListener('mousedown', function (event) {
    if (event.currentTarget.checked) {
        var radioElement = event.currentTarget;
      setTimeout(function () {
        radioElement.checked = '';
      }, 100);
    }
  })
}

我尝试使用event.stopImmediatePropagation()等等而不是setTimeout，但由于某些原因它无效。根据您的使用情况，这似乎相对安全。

Answer 2

JQuery解决方案，如果您将类radioClass分配到单选按钮：

(function () {
    $('.radioClass').on('mouseup', function (e) {
    var xRadioB = this;
    if ($(xRadioB).is(':checked')) {
        setTimeout(function () {
        $(xRadioB).prop('checked', false);
      }, 5);
    }
  });
})();

JSfiddle示例：https://jsfiddle.net/nfed1f7c/

如何通过单击取消选中单选按钮，默认选中

2 个答案: