单击时取消选择单选按钮

Unselect radio button on click

本文关键字：单选按钮 选择 取消 单击      更新时间：2023-11-19

我试图用jquery点击来取消选择单选按钮。

通缉行为：

  1. 如果已选中单击的单选按钮，请取消选中
  2. 如果未选中单击的单选按钮，请选中

这是我的小提琴：http://jsfiddle.net/2te28/15/

和我的代码：

$('.table').on('click mousedown', '.radio', function() {
    if($(this).attr('id') == $(this).parents('tr').find('.radio:checked').attr('id'))
        $(this).removeAttr('checked');
});

我的问题是，无论我点击什么，它总是被取消选中。
编辑：已更正id转录错误
编辑2：不能同时选择两个单选按钮

更改HTML。您可以更改id，但也必须更改name。

$('.table').on('click', '.radio', function() {
  if (this.getAttribute('checked')) { // check the presence of checked attr
    $(this).removeAttr('checked'); // if present remove that
  } else {
    $(this).attr('checked', true); // if not then make checked
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table">
  <tr>
    <td>
      <input type="radio" id="radio1" name="1" checked="checked" class="radio" />
      <input type="radio" id="radio2" name="2" checked="checked" class="radio" />
    </td>
  </tr>
</table>

演示

根据一条评论

$('.table').on('click', '.radio', function() {
  if (this.getAttribute('checked')) {
    $(this).removeAttr('checked');
    $(this).siblings('.radio').attr('checked', false);
  } else {
    $(this).attr('checked', true);
    $(this).siblings('.radio').removeAttr('checked');
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table">
  <tr>
    <td>
      <input type="radio" id="radio1" name="1" checked="checked" class="radio" />
      <input type="radio" id="radio2" name="2" checked="checked" class="radio" />
    </td>
  </tr>
</table>

DEMO

查看此演示：http://jsfiddle.net/535dR/1/

代码：

$('.table input[type="radio"]').on('mouseup', function() {
    var radio = $(this);
    if(radio.prop('nc') == 0) {
        setTimeout(function() {
            // *to work: this needs to run only after the event completes*
            if(radio.is(':checked')) radio.removeAttr('checked');
            radio.prop('nc', 1);
        }, 10); 
    }
    else radio.prop('nc', 0);
});

更新的演示：http://jsfiddle.net/535dR/3/

评论中提到的这两点都得到了解决。

这里有一个简单的工作JSFiddle：http://jsfiddle.net/2te28/61/

代表单选按钮的html标签的<id>和<name>必须是唯一的，因此更改为：

<input type="radio" id="radio1" name="1"  class="radio"/>
<input type="radio" id="radio2" name="2"  class="radio"/>

然后，您可以添加一些简单的JQuery代码：

var radioChecked = $('.table .radio').is(':checked');
$('.table .radio').click(function() {
    radioChecked = !radioChecked;
    $(this).attr('checked', radioChecked);
});​

<input type="radio" id="radio1" name="1"  class="radio"/>
<input type="radio" id="radio2" name="2"  class="radio"/>

那么你只需要添加

$('.radio').click(function(){
value = $(this).val();
if(val == 1){
$('#radio1').removeAttr('checked');
}
else{
$('#radio2').removeAttr('checked');
}
});

这对我有效

我所做的非常简单。

我一开始就设置了RadioButton.style.textDecoration = "none"。这对RadioButton元素没有任何影响，但设置仍然有效。

然后，在OnClick事件上，我检查textDecoration。如果是"none"，我设置RadioButton.checked = true和textDecoration = "underline"

如果是"underline"，我设置RadioButton.checked = false和textDecoration = "none"

相关文章：