如何通过第二次单击取消选中单选按钮答案

【问题标题】：How to uncheck a radio button by clicking on it a second time如何通过第二次单击取消选中单选按钮
【发布时间】：2012-08-18 11:09:33
【问题描述】：

我一直在搜索很多主题，但没有找到与我的问题真正对应的任何内容：

我想让单选按钮无法选中（即，在已选中单选按钮时单击它来取消选中它）。

我找到了一些使用隐藏单选按钮作为临时比较对象的解决方案，但这不适合我现有的上下文，所以我想在没有其他单选按钮的情况下做同样的事情。

我试图简单地测试和更改“onclick”事件中单选按钮的状态/值，但它并不是很成功...

提前致谢，克莱姆。

【问题讨论】：

标签： javascript html radio-button

【解决方案1】：

这不是单选按钮。如果你试图让这个工作，你只会让你的用户感到困惑。

如果您想要可以选中然后取消选中的内容，请使用复选框。单选按钮用于选择一组选项中的一个。

【讨论】：

如果他想让它恢复到原来的、未选中的状态怎么办？对用户来说还是有点困惑，但这是可以理解的要求。
也许提供一个重置按钮，但取消选中单选按钮并不是世界其他地方使用单选按钮控件的方式。
@box9 IMO 如果存在这样的“原始的、未选择的状态”，即如果单选按钮呈现给用户而没有选择其中一个按钮开始时，这是一个错误。一组单选按钮的要点是要求用户选择其中一个选项。
我的设计规则迫使我在这里使用单选按钮。但我想要的只是让用户有可能通过取消选中选定的单选按钮来纠正他的答案，如果他不想检查其中任何一个。
添加“空白”选项（“我不知道”、“我不想回答”...）。

【解决方案2】：

这样更好：

onclick="
var isChecked = $(this).attr('is_che');
if (isChecked) {
     $(this).removeAttr('checked');
     $(this).removeAttr('is_che');
}
else {
     $(this).attr('checked', 'checked');
     $(this).attr('is_che', 'true');
}"

【讨论】：

谢谢，你说得对，好像对代码优化比较好！

【解决方案3】：

我知道这种操作对于单选按钮来说是非标准的，但发帖人要求使用该功能。以下是我过去使用过的代码。我发现它不是最优化的（假设有很多单选按钮），但我也没有花时间进行优化。

    //  Allow for radio button unchecking
$(function(){
    var allRadios = $('input[type=radio]')
    var radioChecked;

    var setCurrent = function(e) {
        var obj = e.target;
        radioChecked = $(obj).attr('checked');
    }

    var setCheck = function(e) {
        if (e.type == 'keypress' && e.charCode != 32) {
            return false;
        }
        var obj = e.target;
        if (radioChecked) {
            $(obj).attr('checked', false);
        } else {
            $(obj).attr('checked', true);
        }
    }

    $.each(allRadios, function(i, val) {
        var label = $('label[for=' + $(this).attr("id") + ']');
        $(this).bind('mousedown keydown', function(e){
            setCurrent(e);
        });

        label.bind('mousedown keydown', function(e){
            e.target = $('#' + $(this).attr("for"));
            setCurrent(e);
        });

        $(this).bind('click', function(e){
            setCheck(e);    
        });
    });
});

【讨论】：