How to get onchange callback on radio buttons, but only the one that was SET

Question

I have a group of radio buttons with the same name, but different values. I'd like to do something like:

$("#langs").on("change", "[name=locale]", myfunction);

This works, but when I click on a new radio button myfunction gets called twice: once for the "old" radio button that is automatically getting unchecked, and once for the new one I'm clicking on.

changing onchange to onclick is not a solution, because I use it with jquery-mobile and it wraps the inputs with label, so the label is getting clicked, not the input.

Kazim

Answer 1

You can pass $(this) as an argument to myfunction and then inside myfunction check if the radio button is checked

$("#langs").on("change", "[name=locale]", function() { myfunction($(this)); } );

function myfunction(elem) {
    if(elem.is(':checked')) {
        // code here
    }
}

Pedigree

I'm probably doing something wrong, but I had to do $(elem).is(':checked') to get this to work – Irkutsk

Answer 2

Does this work for you? Following the jQM Docs

• Example 1
• Example 2 ( fun )

HTML:

<div data-role="page"> 
    <fieldset data-role="controlgroup">
        <legend>Choose a language:</legend>
        <input type="radio" name="langs" id="english-lang" value="en" />
        <label for="english-lang">English</label>
        <input type="radio" name="langs" id="korean-lang" value="ko" />
        <label for="korean-lang">Korean</label>
    </fieldset>
</div>​

JS:

$("input[name=langs]:radio").bind( "change", function(event, ui) {
    console.log('Lang: '+$(this).val());

    // Call function here
});

Sunbreak

.bind() is deprecated as of jQuery 1.7, and the preferred method for binding events is .on() (straight from the doc). – Logistician

Answer 3

As far as I know, you don't have any restriction to use onclick evente with jquery in a label. If you have an id, you can use it. Let's say you have the following html:

<label for="foo" id="whatever1">foo</label><input type="radio" name="radiogroup_0" value="foo" >
<label for="bar" id="whatever2">bar</label><input type="radio" name="radiogroup_1" value="bar" >

In you jquery you might add:

$('#whatever1').click(
  function(){
    //paste your code inside
  }
);

Same for the other radio button's label

$('#whatever1').click(
  function(){
    //paste your code inside
  }
);

Hope this helps. Luis M.

Buffalo

Answer 4

How about trying something like:

<div data-role="fieldcontain">
     <fieldset data-role="controlgroup" data-type="horizontal">
     <input type="radio" name="langs" id="first" value="1" onchange="myfunction();"/>
     <label for="first">First</label>
     <input type="radio" name="langs" id="second" value="2" onchange="myfunction();"/>
     <label for="second">Second</label>
     </fieldset>
</div>

And then:

function myfunction(){
    if($("#langs option:selected")){
    //do something, for example
        alert($("#langs option:selected").text());
    }
}

This should call the function only once as it is contained within the element that needs uses it.

Mitigate