jQuery 单击/更改单选按钮集上的功能
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3440195/
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
jQuery click / change function on radio button set
提问by GSTAR
I have a radio button set called "pick_up_point". There are 3 options and clicking on an option will display a set of input fields relevant to the option.
我有一个名为“pick_up_point”的单选按钮集。有 3 个选项，单击一个选项将显示一组与该选项相关的输入字段。
Now by default when the user clicks on an option I run the change() function which will run a function called "clearInputFields" - which as you might guess will clear out any text entered in the input fields.
现在默认情况下，当用户点击一个选项时，我会运行 change() 函数，该函数将运行一个名为“clearInputFields”的函数——你可能猜到它会清除输入字段中输入的任何文本。
$("input[name='pick_up_point']").change(function()
{
clearInputFields();
});
Now I have tried extending this so that a prompt is displayed to the user to let them know that the input fields will be cleared:
现在我尝试扩展它，以便向用户显示提示，让他们知道输入字段将被清除：
$("input[name='pick_up_point']").click(function(event)
{
if(confirm('Address details will be cleared. Continue?'))
{
return true;
}
else
{
return false;
}
});
The 'click' function is before the 'change' function.
“点击”功能在“更改”功能之前。
This works "OK" in Firefox and does not work properly in IE.
这在 Firefox 中“正常”工作，但在 IE 中无法正常工作。
In Firefox the radio button gets selected and the prompt is displayed, and clicking on the Cancel button will go back to the previous option with all values retained.
在 Firefox 中，单选按钮被选中并显示提示，单击取消按钮将返回上一个选项并保留所有值。
In IE the radio button gets selected and the prompt is displayed but the values get cleared out. If you click Cancel then no radio button is selected.
在 IE 中，单选按钮被选中并显示提示，但值被清除。如果单击取消，则不会选择任何单选按钮。
The way I would like this to work is if you click another radio button it should not select it unless you click OK on the prompt. If you click Cancel the values should be retained.
我希望它起作用的方式是，如果您单击另一个单选按钮，则不应选择它，除非您在提示上单击“确定”。如果单击取消，则应保留这些值。
回答by bobince
In IE, the changeevent on checkboxes and radio buttons doesn't fire immediately, but only after the field has been unfocused. In this way it behaves like text input boxes.
在 IE 中，change复选框和单选按钮上的事件不会立即触发，而是只有在该字段未聚焦后才会触发。通过这种方式，它的行为类似于文本输入框。
jQuery monkeys about with the changeevent quite significantly, in a way that hides this behaviour from you. However it is unable to accurately reproduce the behaviour of other browsers in IE, so in some cases it will trigger changein response to interaction with an element even when another clickevent handler tries to preventDefault.
jQuery 对change事件进行了相当大的调整，以一种向您隐藏此行为的方式。然而，它无法在 IE 中准确地重现其他浏览器的行为，因此在某些情况下，change即使另一个click事件处理程序试图阻止默认，它也会响应与元素的交互而触发。
Another problem: in IE, if you return falsefrom clickon a radio button, the new radio button won't get checked, but the previous button will still lose its checkedness, leaving you with no radios checked!
另一个问题：在 IE 中，如果您return false从click一个单选按钮开始，新的单选按钮将不会被选中，但前一个按钮仍将失去其选中状态，让您没有选中任何单选按钮！
So you'll probably have to do some kind of annoying state-tracking, and manually put the radio buttons back to their old state when the confirm is refused. eg.:
所以你可能不得不做一些烦人的状态跟踪，并在确认被拒绝时手动将单选按钮恢复到原来的状态。例如。：
var currentradio= $("input[name='pick_up_point']:checked")[0];
$("input[name='pick_up_point']").change(function(event) {
var newradio= $("input[name='pick_up_point']:checked")[0];
if (newradio===currentradio)
return;
if (confirm('Address details will be cleared. Continue?')) {
clearInputFields();
currentradio= newradio;
} else {
currentradio.checked= true;
}
});
回答by Mark Schultheiss
In order to ensure that the selection actually changed place the function call in the .change event handler and REMOVE the .click event handler.
为了确保选择实际更改，将函数调用放在 .change 事件处理程序中并删除 .click 事件处理程序。
$("input[name='pick_up_point']").change(function(event)
{
if(confirm('Address details will be cleared. Continue?'))
{
clearInputFields();
return true;
}
else
{
return false;
}
});
Not really sure you need the return xx statements but I don't know the rest of you code base so I left them in there.
不太确定您是否需要 return xx 语句，但我不知道其余的代码库，所以我将它们留在那里。
EDIT:
编辑：
To demonstrate the effect of the .change vs the .click (on actual changes) I have put together a small demo here:
为了演示 .change 与 .click （实际更改）的效果，我在这里整理了一个小演示：
Note the counter increments and displays at the bottom (not fancy, but demonstrates the point)
注意计数器递增并显示在底部（不是花哨的，而是说明了这一点）
EDIT2: Added some indication of the effect of calling a clear function within the events for .click and .change
EDIT2：添加了在 .click 和 .change 事件中调用 clear 函数的效果的一些指示
EDIT3: Added another demonstration where I set the background color on event bubble to the parent div to demonstrate the effects of the return value (true and false) - just click the same radio buttons multiple times, and change - use the negative and positive answers to view the results of each choice.
EDIT3：添加了另一个演示，其中我将事件气泡的背景颜色设置为父 div 以演示返回值的效果（true 和 false） - 只需多次单击相同的单选按钮，然后更改 - 使用否定和肯定答案查看每个选择的结果。
These show the need for the event propogation methods you might want to investigate if the effect there is not as desired.
See this page for details on event propogation:
http://api.jquery.com/category/events/
这些表明需要事件传播方法，如果那里的效果不如预期，您可能想要调查。
有关事件传播的详细信息，请参阅此页面：http:
//api.jquery.com/category/events/
