How to add events on Jquery UI button

Question

I have a question on how to use Jquery UI.

This is my first time that I try Jquery UI and I could add a button by using Jquery UI button.

Now, I'd like to add events when the radio is switched on and off.

For example, when the radiobox is turned on, an alert window shows up saying "on" and when the radiobox is turned off, an alert window shows up saying "off".

How could I add events to Jquery UI button?

Thanks in advance !!

output

Jquery UI button

javascript

$(function(){

    $('input[type=radio]').button();
    $('.set').buttonset();

})

html

<div class="set">
    <input type="radio" name="radio" id="radio1"><label for="radio1" />ON</label>
    <input type="radio" name="radio" id="radio2"><label for="radio2" />OFF</label>
</div>

BeNdErR · Accepted Answer · 2013-09-12 08:11:02Z

3

You can try like this

$('.set input').on('click', function(){
   alert($("label[for='"+$(this).attr("id")+"']").text()); 
});

fiddle http://jsfiddle.net/DFKdh/

answered Sep 12, 2013 at 8:11

BeNdErR

18k21 gold badges79 silver badges106 bronze badges

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

3 Comments

crzyonez777 Over a year ago

Oh I see. It's getting access to the text of label tag directly. This one also works! Thank you very much!

BeNdErR Over a year ago

Yup, so you don't have to pay attention to the label positioning

crzyonez777 Over a year ago

Thank you very much. I accepted another answer because he was faster. But I upvoted your answer. Thanks again!

Tomzan · Accepted Answer · 2013-09-12 08:07:05Z

2

$('.set input[type=radio]').change(function () { 
    //doSomething
})

or

$('.set').on('change', 'input[type=radio]', function () { 
    if ($(this).is(':checked'))
        alert($(this).text());
})

answered Sep 12, 2013 at 8:07

Tomzan

2,81816 silver badges25 bronze badges

Comments

S. S. Rawat · Accepted Answer · 2013-09-12 08:09:03Z

1

Try this, this is helpful for you. I also suggest you try use <span> tag always for html text,

Html

<div class="set">
    <input type="radio" name="radio" id="radio1"><label for="radio1" />ON</label>
    <input type="radio" name="radio" id="radio2"><label for="radio2" />OFF</label>
</div>

JS

$("input[type=radio]").change(function() {  
            alert($(this).next('label').html());
        });

answered Sep 12, 2013 at 8:09

S. S. Rawat

6,1414 gold badges45 silver badges59 bronze badges

1 Comment

crzyonez777 Over a year ago

I need to wait for one more minute to accept an answer. wait a minute.

Collectives™ on Stack Overflow

How to add events on Jquery UI button

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related