On mouseup if no selected class exists on specifc elements, then remove selected class from another element

Question

I have a series of buttons (A,B,C,D) that toggle like radio buttons, only one can be selected at one time. If the user selects a button, the user can also click the same button again to toggle off.

There is an additional button (X), that has a relationship with buttons (A,B,C,D). In which Button X can only be selected if an element within buttons (A,B,C,D) is selected.

1. The user can toggle buttons (A,B,C,D) like radio buttons = this works

2. The user can toggle buttons (A,B,C,D) like radio buttons, select Button X, and then continue to toggle buttons (A,B,C,D) like radio buttons and Button X will still stay highlighted. = this works

3. Any ONE of the buttons (A,B,C,D) can be selected along with the button X. = this works

My problem is Button X can not stay selected if buttons (A,B,C,D) are deselected. To recreate please take a look here. http://jsfiddle.net/froze1906/tHezS/

1. Attempt to click button X, you cant b/c it requires one of the buttons (A,B,C,D) to be selected.

2. Click button A and it gets selected, now click button X and it gets selected, now the user can either select another button from the group OR toggle button X back off.

3. Now toggle off whichever buttons (A,B,C,D) you have selected and button X is still selected.

What do I need to do add to check that if buttons (A,B,C,D) are deselected that button X also gets deselected on mouseup when buttons (A,B,C,D) are turned off.

Answer 1

DEMO: http://jsfiddle.net/tHezS/1/

I simplified your code also.

$(".button_toggle").on(mouseup, function(evt){
    // If this is already toggled. Remove this class, and the class of the 'X'
    if($(this).hasClass("button_toggle_selected")){
        $(this).removeClass("button_toggle_selected");
        $(".button_x_icon_toggle").removeClass("button_toggle_selected");
    }else{
        //Remove .button_toggle_selected from other .button_toggle's
        //Add .button_toggle_selected to this element.
        $('.button_toggle.button_toggle_selected').removeClass('button_toggle_selected');
        $(this).addClass('button_toggle_selected');                
    }
});