Javascript

Question

I have 2 switches and jquery.

<input type="radio" name="lom" value="1" checked> first <input type="radio" name="lom" value="2"> second 

Now, with the button, I can set onClick to launch the function. How to make the switches run the function when I click on one of them?

Answer 1

You can use .change for what you want

 $("input[@name='lom']").change(function(){ // Do something interesting here }); 

as of jQuery 1.3

you don’t need "@" anymore. The right way to choose:

 $("input[name='lom']") 

Answer 2

If you have radio stations in the container with id = radioButtonContainerId, you can still use onClick and then check which one is selected and run some functions accordingly:

 $('#radioButtonContainerId input:radio').click(function() { if ($(this).val() === '1') { myFunction(); } else if ($(this).val() === '2') { myOtherFunction(); } }); 

Answer 3

 <input type="radio" name="radio" value="creditcard" /> <input type="radio" name="radio" value="cash"/> <input type="radio" name="radio" value="cheque"/> <input type="radio" name="radio" value="instore"/> $("input[name='radio']:checked").val() 

Answer 4

There are several ways to do this. Regardless of the presence of a container around the radio buttons, but you can also place the class directly on the buttons. Using this HTML:

 <ul id="shapeList" class="radioList"> <li><label>Shape:</label></li> <li><input id="shapeList_0" class="shapeButton" type="radio" value="Circular" name="shapeList" /><label for="shapeList_0">Circular</label></li> <li><input id="shapeList_1" class="shapeButton" type="radio" value="Rectangular" name="shapeList" /><label for="shapeList_1">Rectangular</label></li> </ul> 

you can select by class:

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

or select container id:

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

In any case, the event will fire when you click on a switch or a shortcut for it, although, oddly enough, in the latter case (selecting by "#shapeList"), clicking on a label will trigger a double-click function for some reason, at least in FireFox ; class selection does not.

SetShape is a function and looks like this:

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

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

Answer 5

it should be good

 $(document).ready(function() { $('input:radio').change(function() { alert('ole'); }); }); 

Answer 6

It is always useful to limit the search for the DOM therefore, it is better to use a parent so that the entire DOM does not go through.

VERY FAST

 <div id="radioBtnDiv"> <input name="myButton" type="radio" class="radioClass" value="manual" checked="checked"/> <input name="myButton" type="radio" class="radioClass" value="auto" checked="checked"/> </div> $("input[name='myButton']",$('#radioBtnDiv')).change( function(e) { // your stuffs go here });