CODEWITHSUNDEEP
javascripthtmlcss
rob
rob

Reputation: 301

javascript for changing button states

This is what I am looking for:

How to keep button active after press with jQuery

I want four buttons and at only one time one button is active.

For example if button one is pressed the others are not shown active and vice versa for the other buttons.

Upvotes: 1

Views: 17364

Answers (4)

Thiago Negri
Thiago Negri

Reputation: 5351

In case you are looking for a pure JavaScript solution (i.e. no extra dependencies with jQuery, Bootstrap, etc), you can do it like this.

First, group your HTML buttons in a common parent so you can iterate over them, for example:

<div id="buttonGroup">
  <button>1</button>
  <button>2</button>
  <button>3</button>
  <button>4</button>
</div>

Then, in JavaScript, you can "initialize" the div by setting handlers for the click events of the buttons:

function initButtonGroup(parentId) {
    var buttonGroup = document.getElementById(parentId),
        i = 0,
        len = buttonGroup.childNodes.length,
        button;
        handleButtonGroupClick = initClickHandler(parentId);

    for (; i < len; i += 1) {
        button = buttonGroup.childNodes[i];
        if (button.nodeName === 'BUTTON') {
            button.addEventListener('click', handleButtonGroupClick);
        }
    }
}

Then you need to write the behavior you want in the handler of click events, in this example I'm just changing the classes to get a visual feedback of which one is active:

function initClickHandler(parentId) {
    return function(e) {
        var buttonGroup = document.getElementById(parentId),
            i = 0,
            len = buttonGroup.childNodes.length,
            button;

        e.preventDefault();

        for (; i < len; i += 1) {
            button = buttonGroup.childNodes[i];
            if (button.nodeName === 'BUTTON') {
                button.className = '';
            }
        }

        e.target.className = 'active';
    };
}

Then, you can call your initializer function to initialize your "component":

initButtonGroup('buttonGroup');

I've setup a JSFiddle for this example, take a look: http://jsfiddle.net/et75ftca/

If performance is really important to you, this code may be optimized by using a single click event handler in the entire div element and filtering events that are not targetted at a button.

Upvotes: 4

Roi
Roi

Reputation: 565

Hope this helps you:

HTML

<button id='1' class="btn">1</button>
<button id='2' class="btn">2</button>
<button id='3' class="btn">3</button>
<button id='4' class="btn">4</button>

CSS

.actv {
    background: red;
}

JS

$(".btn").click(function() {
  $(document).find(".btn").removeClass("actv");
  $(this).addClass("actv");
});

JSFiddle

Upvotes: 1

visualfanatic
visualfanatic

Reputation: 138

http://jsfiddle.net/kdghcec9/

HTML:

<button class="btn">One</button>
<button class="btn">Two</button>
<button class="btn">Three</button>

CSS:

.btn {
    border: 0;
    outline: 0;
    display: inline-block;
    background-color: #ddd;
    border-radius: 3px;
    padding: 10px 12px;
}

.btn.active {
    background-color: #000;
    color: #fff;
}

JS (jQuery):

$(function() {
    $('.btn').on('click', function(e) {
        $('.btn.active').removeClass('active');
        $(this).addClass('active');
        e.preventDefault();
    });
});

Upvotes: 0

delCano
delCano

Reputation: 385

Assuming you have the code in your link:

 $('.uiButton').click(function() {
   $(this).toggleClass("active");
 });

It would be as easy as writing: 

 $('.uiButton').click(function() {
   $('.uiButton').removeClass("active");
   $(this).addClass("active");
 });

Upvotes: 1

Related Questions