javascript - 如何在单击时选中/取消选中单选按钮？

Question

我希望能够通过单击取消选中单选按钮。

所以，如果一个单选按钮未被选中，我想选中它，如果它被选中，我想取消选中它。

这不起作用:

$('input[type=radio]:checked').click(function(){
    $(this).attr('checked', false);
});

我现在无法选中单选按钮。

Answer 1

这不是要替换复选框，而是允许单选按钮组返回到未选中状态。这很棘手，因为 radio 选择不像正常事件那样起作用。

浏览器在正常事件链之外处理单选按钮。因此，带有 event.preventDefault() 或 event.stopPropagation() 的单选按钮上的点击处理程序不会阻止单选按钮被选中。 .removeAttr('checked') 必须在 setTimeout 中完成以允许事件完成，并且浏览器检查单选按钮(再次)，然后 setTimeout 将触发。

这也能正确处理用户启动 mousedown 但在 mouseup 之前离开单选按钮的情况。

//$ = jQuery;
$(':radio').mousedown(function(e){
  var $self = $(this);
  if( $self.is(':checked') ){
    var uncheck = function(){
      setTimeout(function(){$self.removeAttr('checked');},0);
    };
    var unbind = function(){
      $self.unbind('mouseup',up);
    };
    var up = function(){
      uncheck();
      unbind();
    };
    $self.bind('mouseup',up);
    $self.one('mouseout', unbind);
  }
});

希望对你有帮助