jquery button click event

Question

I have an issue with a click event on a bootstrap button group. I am attempting to retrieve the ids of the buttons that are active. Including the one I'm currently clicking on (if it was unselected). The issue is that the current button I'm clicking on doesn't get added as a selected button when I selected it. As if the class active hasn't been applied yet.

Here is my button group:

  <div class="btn-group" id = "rbtns" data-toggle="buttons-checkbox" >
        <button class="btn rbtn" id = "0">0</button>
        <button class="btn rbtn" id = "1">1</button>
        <button class="btn rbtn" id = "2">2</button>
        <button class="btn rbtn" id = "3">3</button>
        <button class="btn rbtn" id = "4">4</button>
  </div>

And my action:

 $( document ).ready(function() {

       $(".rbtn").click(function () {

        var data = [];

        $('#rbtns .btn.active').each(function() {
              data.push($(this).attr('id'));

        });

        alert ("Data length: " + data.length);
       });

How can I make sure I receive all ids the buttons with class active?

The buttons I am using are bootstrap checkbox style buttons. Once you click on them they are selected. And when you click on them they get unselected.

Bryce · Accepted Answer · 2013-04-09 22:13:31Z

2

You could add the class in your click function before your retrieve all of the active buttons.

$(this).addClass('active');

Use the button method to set the checkbox before retrieving

$(this).button('toggle');

Here is a working example, however I dont really like call button('toggle') twice.

edited Apr 9, 2013 at 22:13

answered Apr 9, 2013 at 19:25

Bryce

1066 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Adil Shaikh · Accepted Answer · 2013-04-09 19:25:48Z

0

Try explicitly setting the clicked button as active

$(".rbtn").click(function () {
  if ($(this).hasClass('active') == false){
    $(this).addClass('active');
  }

answered Apr 9, 2013 at 19:25

Adil Shaikh

44.8k17 gold badges95 silver badges112 bronze badges

1 Comment

Ayrad Over a year ago

setting explicitly seems to remove the toggle behavior of the button. It doesn't stick When you click on it.

tymeJV · Accepted Answer · 2013-04-09 19:55:15Z

0

Fiddle: http://jsfiddle.net/xdyRt/

$(".rbtn").click(function () {
    $(this).toggleClass("active");     
    var data = [];

    $(".btn").each(function() {
        $(this).hasClass("active") ? data.push($(this).attr("id")) : null;
    });

    for (var i = 0; i < data.length; i++) {
        alert(data[i]);
    }
});

edited Apr 9, 2013 at 19:55

answered Apr 9, 2013 at 19:25

tymeJV

105k14 gold badges165 silver badges158 bronze badges

3 Comments

Ayrad Over a year ago

This doesn't keep the button selected once I click on it. It doesn't work as a toggle button anymore.

tymeJV Over a year ago

Check it now, added a fiddle

Ayrad Over a year ago

This doesn't seem to do it. Maybe because I an using checkbox style buttons as in the link I added in the description in the checkbox session. Maybe the bootstrap js toggles the button after the jquery code is ran so it toggles it back

Collectives™ on Stack Overflow

jquery button click event

3 Answers 3

Comments

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related