Блог

Главная - Вопросы по программированию - Веб-переключатели, с помощью которых вы можете отключить все

Веб-переключатели, с помощью которых вы можете отключить все

#javascript #jquery-ui #radio-button

#javascript #jquery-пользовательский интерфейс #переключатель

Вопрос:

Я хочу, чтобы на моей веб-странице было 3 кнопки типа радио. Если я нажимаю на одну кнопку, она включается, а другие 2 в группе выключаются. Пока все нормально. Однако, если я нажму кнопку «Включено» в данный момент, я хочу, чтобы она переключилась на «выключено». Т. е. иметь возможность отключить все кнопки в группе.

Я взглянул на кнопку пользовательского интерфейса jQuery, но я не могу понять, как это реализовать. Возможно ли это? Или есть какая-то другая библиотека javascript, которая предлагает эту функцию?

Пример кода обычных переключателей jQuery…

 <!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript">

  $(document).ready(function() {
    $("#radio").buttonset();
  });

</script>
</head>
<body style="font-size:62.5%;">

<div id="radio">
    <input type="radio" id="radio1" name="radio" /><label for="radio1">Choice 1</label>
    <input type="radio" id="radio2" name="radio" checked="checked" /><label for="radio2">Choice 2</label>
    <input type="radio" id="radio3" name="radio" /><label for="radio3">Choice 3</label>
</div>

</body>
</html>

Комментарии:

1. Ваша конечная цель — использовать набор кнопок пользовательского интерфейса jQuery или просто иметь описанную вами функциональность? В этом вопросе вы упомянули две проблемы: отключение всех переключателей, а также использование набора кнопок пользовательского интерфейса jQuery.

2. @Zero21xxx В идеале я бы использовал пользовательский интерфейс jQuery, поскольку я уже использую это (проще использовать тему пользовательского интерфейса). Но если jQuery-UI-Button не поддерживает это, тогда мне нужно искать какой-то другой способ

3. Можете ли вы опубликовать HTML для переключателей и немного JavaScript?

4. Что касается спецификации, переключатели никогда не должны иметь состояние «все выключено» — w3.org/TR/html4/interact/forms.html#radio — поэтому инструменты, которые помогут вам включить это, всегда будут немного размытыми

5. (в HTML5 это отличается, просто для справки — w3.org/TR/html5/number-state.html#radio-button-state )

Ответ №1:

Как вы знаете, вам нужно не то, как работают переключатели. И обычно не такая уж хорошая идея нарушать обычное поведение любого элемента пользовательского интерфейса. Однако у вас могла бы быть кнопка с надписью, скажем, «очистить все» с обработчиком onclick, который очистил бы все переключатели. Я думаю, это хорошая идея: имо, всегда сложно выбрать второй переключатель, чтобы очистить проверенное состояние первого. Конечно, вам не нужен jquery для этого.

Однако, повторюсь: я бы не стал назначать один из массива переключателей для воздействия на другие, как вы описываете.

Комментарии:

1. Я удалил свой ответ, потому что думал о том, чтобы просто переопределить поведение браузера по умолчанию в onClick событии, но @Pete Wilson прав, потому что переключатели — это не то, что вы хотите в этом сценарии — плохой пользовательский интерфейс, как он указал.

2. @Gareth, Пит Уилсон, спасибо. Однако функциональность, которую я хочу (измененное поведение переключателей), не обязательно реализовывать с помощью ввода формы HTML radio. Например, это можно было бы сделать с помощью флажков, в которых вы настроили обработчики событий щелчка javascript, чтобы управлять тем, какие кнопки включены / выключены, хотя это немного сложно. Так что я надеялся, что это было сделано раньше.

3. @spidey — да, кажется, флажки больше похожи на то, что вы хотите, в соответствии с обычной практикой пользовательского интерфейса. Это делалось много, много раз раньше, так что это очень обычно. Хотя флажок не должен вызывать действие, поэтому он немного не соответствует спецификации. На самом деле это не сложно, как вы увидите, когда закодируете его.

Ответ №2:

Я бы сделал это таким образом: 

 $(window).ready(function() {

    var currentRadio = new Array();
    $('input:radio').bind('click', function() {
        var name = $(this).attr('name');
        if(name in currentRadio amp;amp; currentRadio[name] === $(this)[0]) {
            $(this).removeAttr('checked');
            currentRadio[name] = false;
        } else {
            currentRadio[name] = $(this)[0];
        }
    });

});

Это универсальное решение для нескольких групп переключателей (группировка по имени).

Вот оно в действии:http://jsfiddle.net/LkBYc