Как снять отметку с переключателя, нажав на него второй раз

Question

Я искал во многих темах, но не нашел ничего, что действительно соответствовало бы моей проблеме:

Я хочу отключить переключатели (т. Е. Снимать флажок, нажимая на него, когдаэто уже проверено).

Я нашел некоторые решения, использующие скрытую радиокнопку в качестве временного объекта сравнения, но это не соответствует моему существующему контексту, поэтому я хотел бы сделать то же самое без другой радиокнопки.

Я пытался просто проверить и изменить статус / значение переключателя на событии «onclick», но это не было очень успешным ...

Заранее спасибо, Клем.

Answer 1

Это не то, что радио кнопки.Если вы попытаетесь заставить это работать, вы просто запутаете своих пользователей.

Если вы хотите что-то, что может быть проверено, а затем не отмечено, установите флажокРадиокнопки предназначены для выбора одного из нескольких параметров.

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

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