performance - 通过单击相同的取消选中单选按钮

Question

<table class="table">
    <tr>
        <td>
            <input type="radio" id="radio1" name="1" checked="checked" class="radio"/>
        </td>        
        <td>        
          <input type="radio" id="radio2" name="1" checked="checked" class="radio"/>
        </td>
    </tr>
</table>

我想遵循无线电组的默认行为，但还有一个功能，假设选择了任何无线电，现在如果选择/单击相同的无线电，那么它将自行取消选中。我曾尝试使用“mouseup”事件，但它不起作用

function radioSearchFn(obj)
{
    if(obj.checked == true)
    {
        obj.checked = false;
        obj.removeAttribute("checked");

    }
}

演示

Answer 1

在这里回答你的问题。

单选按钮是必需的，因此必须始终选中其中一个。如果您希望此属性消失，您需要使用复选框，它旨在满足您的需求。

有关复选框的更多信息

如果你仍然坚持使用单选按钮，试试这个JQuery 代码，写在我提到的帖子的另一个答案中。

var radio_button=false;
$('.radio-button').on("click", function(event){
    var this_input=$(this);
        if(this_input.attr('checked1')=='11')
    {

        this_input.attr('checked1','11')



    }
    else
    {
        this_input.attr('checked1','22')

    }
    $('.radio-button').prop('checked', false);
    if(this_input.attr('checked1')=='11')
    {
        this_input.prop('checked', false);
        this_input.attr('checked1','22')
    }
    else{
        this_input.prop('checked', true);
        this_input.attr('checked1','11')
    }

});

Answer 2

这很容易，您可以添加一个属性，而不是第一次检查单选按钮。稍后您检查此新属性以进行下一次更改。例子：

$("input[type='radio']").change(function () {
         $(this).attr('checked_status', true);
});

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