javascript jquery radio button click

Question

I have 2 radio buttons and jquery running.

 first


        

Answer 1

There are several ways to do this. Having a container around the radio buttons is highly recommended regardless, but you can also put a class directly on the buttons. With this HTML:

Shape:
Circular
Rectangular

you can select by class:

$(".shapeButton").click(SetShape);

or select by container ID:

$("#shapeList").click(SetShape);

In either case, the event will trigger on clicking either the radio button or the label for it, though oddly in the latter case (Selecting by "#shapeList"), clicking on the label will trigger the click function twice for some reason, at least in FireFox; selecting by class won't do that.

SetShape is a function, and looks like this:

function SetShape() {
    var Shape = $('.shapeButton:checked').val();
//dostuff
}

This way, you can have labels on your buttons, and can have multiple radio button lists on the same page that do different things. You can even have each individual button in the same list do different things by setting up different behavior in SetShape() based on the button's value.