Веб-радио кнопки, где вы можете отключить все - PullRequest
Новая
       28

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

0 голосов
/ 06 ноября 2011

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

Я посмотрел на кнопку пользовательского интерфейса 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>

Ответы [ 2 ]

2 голосов
/ 06 ноября 2011

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

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

1 голос
/ 06 ноября 2011

Я бы сделал это так: 

$(window).ready(function() {

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

});

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

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

...