2

我正在尝试通过单击 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 转录错误
EDIT2：不能同时选择两个单选按钮！

4

5 回答 5

7

更改您的 HTML。你已经改变了id，但你也必须改变 then 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>

演示

于 2012-07-19T15:03:19.700 回答
0

检查这个演示：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/

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

于 2012-07-19T14:47:46.730 回答
0

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

代表单选按钮的 html 标记的<id>and必须是唯一的，因此更改为：<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);
});​
于 2012-07-19T15:01:07.270 回答
0 
<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');

}

});

这对我有用

于 2013-03-21T07:58:19.173 回答
0

我所做的非常简单。

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

然后，在OnClick活动中，我检查textDecoration. 如果是"none"我设置RadioButton.checked = true和textDecoration = "underline"

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

于 2019-04-11T14:08:34.210 回答