CODEWITHSUNDEEP
javascriptjqueryjquery-ui
crzyonez777
crzyonez777

Reputation: 1807

How to add events on Jquery UI button

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>

Upvotes: 1

Views: 77

Answers (3)

BeNdErR
BeNdErR

Reputation: 17929

You can try like this

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

fiddle http://jsfiddle.net/DFKdh/

Upvotes: 3

S. S. Rawat
S. S. Rawat

Reputation: 6111

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

Upvotes: 1

Tomzan
Tomzan

Reputation: 2818

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

or 

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

Upvotes: 2

Related Questions