CODEWITHSUNDEEP
jqueryradio-buttongroupingchecked
daGUY
daGUY

Reputation: 28783

Toggle groups of radio buttons together

I have a group of radio buttons on my page like this:

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

When you check the On or Off radio button for "All," it sets all the other radio buttons to the same setting:

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

However, I also want to do the reverse: for example, if the user manually checks all the Off buttons, automatically check the Off button for "All" too. How would I go about doing this?

Upvotes: 1

Views: 405

Answers (4)

buck
buck

Reputation: 205

If you're using jQuery 1.6 or later, you can use .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));
    });
});

see example: jsfiddle

Upvotes: 1

Selvakumar Arumugam
Selvakumar Arumugam

Reputation: 79840

Something like below should do the trick,

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

Upvotes: 0

zim2411
zim2411

Reputation: 628

You would need to write a function that counts the number of radio buttons with "Off" checked. If all are off, check the "All Off" option.

A simpler and possibly more intuitive option might be to change the "All on" and "All off" radio options to buttons. This makes it a one time action that switches the states as needed, and you don't need to worry about visually updating them when the user changes something else. This also prevents the following case from happening:

  • User clicks "All On"
  • User clicks "Off" for option 3

Your code now would still leave the "All On" radio still selected, which is confusing. It should remove the selection all together, leaving neither "All on" or "All off" selected. That just adds to the code complexity though, where as you could simply change them to buttons and be done.

Upvotes: 0

Alejandro B.
Alejandro B.

Reputation: 5102

You can use a jQuery to get all radiobuttons that are not "All", with the selection clause :not(checked) and if length = 0 then unchek the All radiobutton.

No code given because you didn't post the html part of your code, plus... we don't want to take the fun of doing it yourself from you!

Upvotes: 0

Related Questions