Переключайте группы переключателей вместе - PullRequest
Новая
       9

Переключайте группы переключателей вместе

1 голос
/ 22 марта 2012

У меня есть группа радио кнопок на моей странице, как это: 

ALL      (x) On ( ) Off
OPTION 1 (x) On ( ) Off
OPTION 2 (x) On ( ) Off
OPTION 3 (x) On ( ) Off
OPTION 4 (x) On ( ) Off

Если вы установите переключатель «Вкл.» Или «Выкл.» На «Все», он установит для всех остальных переключателей одинаковые значения: 

var autoPostAllOn = $('#auto-post-all-on');
var autoPostAllOff = $('#auto-post-all-off');
var fbPostToggleOn = $('.fb-post-toggle-on');
var fbPostToggleOff = $('.fb-post-toggle-off');

$(autoPostAllOn).click(function(){
  $(fbPostToggleOn).attr('checked', 'checked');
});
$(autoPostAllOff).click(function(){
  $(fbPostToggleOff).attr('checked', 'checked');
});

Однако я также хочу сделать обратное: например, если пользователь вручную проверяет все кнопки выключения, автоматически проверяет кнопку выключения также на «Все». Как бы я поступил так?

Ответы [ 4 ]

1 голос
/ 22 марта 2012

Если вы используете jQuery 1.6 или новее, вы можете использовать .prop 

$(function(){
    $("input.allon").change(function(){
        $("input.on").prop("checked", true);
    });

    $("input.alloff").change(function(){
        $("input.off").prop("checked", true);
    });

    $("input.on, input.off").change(function(){
        $("input.allon").prop("checked",
            ($("input.on").length == $("input.on:checked").length));
        $("input.alloff").prop("checked",
            ($("input.off").length == $("input.off:checked").length));
    });
});

см. Пример: jsfiddle

0 голосов
/ 22 марта 2012

Вам нужно написать функцию, которая подсчитывает количество переключателей с пометкой «Выкл.».Если все они выключены, отметьте опцию «Все выкл.».

Более простой и, возможно, более интуитивный вариант может состоять в том, чтобы изменить опции радио «Все вкл.» И «Все выкл.» На кнопки.Это делает это однократным действием, которое переключает состояния по мере необходимости, и вам не нужно беспокоиться об их визуальном обновлении, когда пользователь изменяет что-то другое.Это также предотвращает следующий случай:

  • Пользователь нажимает «Все включено»
  • Пользователь нажимает «Выкл.» Для варианта 3

Ваш код сейчасвсе равно оставил бы выбранное радио "All On", что сбивает с толку.Он должен удалить выделение все вместе, не выбрав ни «Все включено», ни «Все выключено».Это только увеличивает сложность кода, поскольку вы можете просто поменять их на кнопки и все готово.

0 голосов
/ 22 марта 2012

Что-то вроде ниже должно сделать трюк,

DEMO 

var autoPostAllOn = $('#auto-post-all-on');
var autoPostAllOff = $('#auto-post-all-off');
var fbPostToggleOn = $('.fb-post-toggle-on');
var fbPostToggleOff = $('.fb-post-toggle-off');

autoPostAllOn.change(function() {    
    fbPostToggleOn.prop('checked', true);
});
$(autoPostAllOff).change(function() {
    fbPostToggleOff.prop('checked', true);
});

fbPostToggleOn.change (function () {
    var isChecked = true;
    autoPostAllOff.prop('checked', false);

    fbPostToggleOn.each (function () {
        isChecked = isChecked && this.checked;
    });

    if (isChecked) {
        autoPostAllOn.prop('checked', true);
    }
});
fbPostToggleOff.change (function () {
    var isChecked = true;
    autoPostAllOn.prop('checked', false);

    fbPostToggleOff.each (function () {
        isChecked = isChecked && this.checked;
    });

    if (isChecked) {
        autoPostAllOff.prop('checked', true);
    }
});
0 голосов
/ 22 марта 2012

Вы можете использовать jQuery для получения всех радиокнопок, которые не являются «Все», с предложением выбора: не (отмечен), а если длина = 0, то снимите флажок с радиокнопки Все.

Код не указан, потому что вы не опубликовали html-часть своего кода, плюс ... мы не хотим получать удовольствие от того, чтобы делать это самостоятельно от вас!

...