Программно отменить выбор радиокнопки, щелкнув ее метку - PullRequest
Новая
       36

Программно отменить выбор радиокнопки, щелкнув ее метку

1 голос
/ 18 октября 2011

Я искал скрипт, который позволил бы мне отменить выбор радиокнопки. Я нашел один на SO и реализовал его здесь ...

http://jsfiddle.net/sparky672/YFsVK/1/

Как видите, он отлично работает, но только когда вы нажимаете на саму кнопку-переключатель. (Вы также можете «выбрать» кнопку, щелкнув соответствующий текст <label>. Так работает <label> по умолчанию.)

Однако мне также нужно иметь возможность отменить выбор радиокнопки, просто щелкнув по соответствующей ей <label>, и здесь мне нужна помощь.

(Почему? Потому что я использую плагин, который графически изменяет внешний вид переключателя, используя спрайт изображения, содержащийся в <label>, который перекрывает переключатели по умолчанию. В моем jsFiddle есть строка, которую вы можете активировать чтобы увидеть плагин в действии.)

Я уверен, что мне просто нужно немного подправить этот сценарий, но я не могу понять, что он правильный. Я считаю, что мне просто нужно "выбрать" <label> при манипулировании соответствующей радиокнопкой. <label> «прикрепляется» к кнопке путем помещения кнопки id в атрибут for соответствующего <label>.

JavaScript: 

$(document).ready(function() {

    $('input[name="amount"]').mousedown(function(e) { // allows radio button deselection
        var $self = $(this);
        if ($self.is(':checked')) {
            var uncheck = function() {
                setTimeout(function() {
                    $self.removeAttr('checked');
                }, 0);
            };
            var unbind = function() {
                $self.unbind('mouseup', up);
            };
            var up = function() {
                uncheck();
                unbind();
            };
            $self.bind('mouseup', up);
            $self.one('mouseout', unbind);
        }
    });

});

HTML: 

<fieldset id="radioset">
    <input type="radio" id="radio-1" name="amount" value="Option 1" /><label for="radio-1" title="">Option 1</label><br />
    <input type="radio" id="radio-2" name="amount" value="Option 2" /><label for="radio-2" title="">Option 2</label><br />
    <input type="radio" id="radio-3" name="amount" value="Option 3" /><label for="radio-3" title="">Option 3</label><br />
    <input type="radio" id="radio-4" name="amount" value="Option 4" /><label for="radio-4" title="">Option 4</label><br />
    <input type="radio" id="radio-5" name="amount" value="Option 5" /><label for="radio-5" title="">Option 5</label>
</fieldset>

Ответы [ 2 ]

3 голосов
/ 18 октября 2011 
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function() {

        $(".radio-label").click(function(e) {

            var radio = $(this).attr("for");
            radio = $("#" +radio );
            if(radio.is(":checked")) {
                e.preventDefault();
                radio.removeAttr("checked");
            }

        });

    });
</script>
</head>
<body>
<fieldset id="radioset">
    <input type="radio" id="radio-1" name="amount" value="Option 1" /><label class="radio-label" for="radio-1" title="">Option 1</label><br />
    <input type="radio" id="radio-2" name="amount" value="Option 2" /><label class="radio-label" for="radio-2" title="">Option 2</label><br />
    <input type="radio" id="radio-3" name="amount" value="Option 3" /><label class="radio-label" for="radio-3" title="">Option 3</label><br />
    <input type="radio" id="radio-4" name="amount" value="Option 4" /><label class="radio-label" for="radio-4" title="">Option 4</label><br />
    <input type="radio" id="radio-5" name="amount" value="Option 5" /><label class="radio-label" for="radio-5" title="">Option 5</label>
</fieldset>
</body>
</html>
2 голосов
/ 18 октября 2011

Я также попробовал то, что сделал @Jrod, и заметил, что плагин не работает.Поэтому я изменил плагин.В основном добавление этого к метке: 

.bind('mouseup', function(){
    if ($(this).is('.checked') && input.is(':radio')) {
        setTimeout(function(){
            label.removeClass('checked focus');
            input.removeAttr('checked').blur();
        }, 0);
    }
});

Вот обновленная демоверсия .

...