Question

我正试图通过点击jquery来取消选择一个单选按钮。

通缉行为：

如果已点击单选按钮，则取消选中
如果未选中单击单选按钮，请选中

和我的代码：

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

我的问题是它总是取消选中我点击的内容。
编辑：更正了ID转录错误
EDIT2：无法同时选择两个单选按钮！

Answer 1

更改您的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>

<强> DEMO

根据评论

$('.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

Answer 2

查看此演示：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/

评论中提到的两点都已解决。

Answer 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);
});

Answer 4

<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');

}

});

这对我有用

Answer 5

我的工作很简单。

我在开头设置了ListView。这对ListView元素没有任何影响，但是设置仍然有效。

然后，在RadioButton.style.textDecoration = "none"事件中，我检查RadioButton。如果是OnClick，则我设置textDecoration和"none"

如果它是RadioButton.checked = true，则我设置textDecoration = "underline"和"underline"

单击时取消选中单选按钮

5 个答案:

根据评论