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

Question

我已经在很多主题中搜索，但没有找到真正符合我的问题的内容：

我想使单选按钮不可选（即通过单击已选中的单选按钮来取消选中状态）。

我发现一些解决方案使用隐藏的单选按钮作为临时比较对象，但这不适用于我现有的上下文，因此我希望在没有其他单选按钮的情况下做同样的事情。

我尝试在“onclick”事件上简单测试和更改单选按钮的状态/值，但并不成功...

提前致谢， Clem。

- Clem

Answer 1

那不是单选按钮的作用。如果您试图这样做，只会让用户感到困惑。

如果您需要一个可以勾选和取消勾选的选项，请使用复选框。单选按钮适用于从一组选项中精确选择一个。

- Karl Knechtel

---

如果他想将其返回到原始的未选择状态呢？对用户来说可能有点混乱，但这是可以理解的要求。 - David Tang

提供一个重置按钮或许是可以的，但是取消单选框并不是世界上其他地方使用单选框控件的方式。 - David T. Macknet

@box9 我认为如果存在这样的“原始未选择状态”，即如果单选按钮在呈现给用户时没有一个被选中作为起点，那么这就是一个错误。一组单选按钮的目的是要求用户选择其中一个选项。 - Karl Knechtel

我有设计规则，强制我在这里使用单选按钮。但是我想要的只是让用户有可能通过取消选择已选中的单选按钮来更正答案，如果他不想选择任何一个。 - Clem

添加一个“空白”选项（例如“我不知道”，“我不想回答”等）。 - Gipsy King

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

- Ivan

---

谢谢，你说得对，这似乎更有利于代码优化！ - Clem

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

- ImpressTheNet Web Developer