jquery - 如何在单选按钮上获得 onchange 回调，但只有一个被设置的按钮

Question

我有一组名称相同但值不同的单选按钮。我想做类似的事情：

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

这可行，但是当我单击一个新的单选按钮时，我的函数会被调用两次：一次用于自动取消选中的“旧”单选按钮，一次用于我单击的新单选按钮。

将 onchange 更改为 onclick 不是解决方案，因为我将它与 jquery-mobile 一起使用，并且它使用标签包装输入，因此标签被点击，而不是输入。

Answer 1

您可以$(this)作为参数传递给myfunction然后myfunction检查单选按钮是否被选中

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

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

Answer 2

这对你有用吗？遵循jQM 文档

• 示例 1
• 示例 2（有趣）

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

Answer 3

试试类似的东西怎么样：

<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>

接着：

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

这应该只调用一次函数，因为它包含在需要使用它的元素中。

Answer 4

据我所知，在标签中使用带有 jquery 的 onclick evente 没有任何限制。如果你有一个 id，你可以使用它。假设您有以下 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" >

在您的 jquery 中，您可以添加：

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

与其他单选按钮的标签相同

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

希望这可以帮助。路易斯·M。