jQuery 如何在单选按钮上获得 onchange 回调，但只有 SET 的那个
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10952691/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get onchange callback on radio buttons, but only the one that was SET
提问by Gavriel
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.
这是有效的，但是当我单击一个新的单选按钮时，myfunction 会被调用两次：一次用于自动取消选中的“旧”单选按钮，一次用于我单击的新单选按钮。
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.
将 onchange 更改为 onclick 不是解决方案，因为我将它与 jquery-mobile 一起使用，并且它用标签包装输入，因此点击的是标签，而不是输入。
采纳答案by Brian Glaz
You can pass $(this)as an argument to myfunctionand then inside myfunctioncheck if the radio button is checked
您可以将$(this)参数作为参数传递给myfunction，然后在内部myfunction检查单选按钮是否被选中
$("#langs").on("change", "[name=locale]", function() { myfunction($(this)); } );
$("#langs").on("change", "[name=locale]", function() { myfunction($(this)); } );
function myfunction(elem) {
if(elem.is(':checked')) {
// code here
}
}
回答by Phill Pafford
Does this work for you? Following the jQM Docs
这对你有用吗？遵循jQM 文档
HTML:
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:
JS：
$("input[name=langs]:radio").bind( "change", function(event, ui) {
console.log('Lang: '+$(this).val());
// Call function here
});
回答by Luis M. Valenzuela
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:
据我所知，在标签中使用带有 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" >
In you jquery you might add:
在您的 jquery 中，您可能会添加：
$('#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.
希望这可以帮助。路易斯·M。
回答by AGE
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 containedwithin the element that needs uses it.
这应该只调用一次函数，因为它包含在需要使用它的元素中。
