Переключение группы радиокнопок вместе

Question

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

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

При проверке переключатель On или Off для «All», он устанавливает все остальные переключатели к тому же установка:

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

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

Answer 1

Если вы используете 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

Answer 2

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

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

Answer 3

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

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

• Пользователь нажимает кнопку «All On»
• пользователь щелкает «Off» для варианта 3

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

Answer 4

Нечто подобное ниже, должны сделать трюк,

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