单选按钮集上的jQuery单击/更改功能答案

【问题标题】：jQuery click / change function on radio button set单选按钮集上的jQuery单击/更改功能
【发布时间】：2010-08-09 22:38:31
【问题描述】：

我有一个名为“pick_up_point”的单选按钮集。有 3 个选项，单击一个选项将显示一组与该选项相关的输入字段。

现在，默认情况下，当用户单击一个选项时，我会运行 change() 函数，该函数将运行一个名为“clearInputFields”的函数 - 正如您可能猜到的那样，它会清除输入字段中输入的所有文本。

$("input[name='pick_up_point']").change(function()
{
 clearInputFields(); 
});

现在我尝试扩展它，以便向用户显示提示，让他们知道输入字段将被清除：

$("input[name='pick_up_point']").click(function(event)
{
 if(confirm('Address details will be cleared. Continue?'))
 {
  return true;
 }
 else
 {
  return false;
 }
});

“点击”功能在“更改”功能之前。

这在 Firefox 中运行“正常”，但在 IE 中无法正常运行。

在 Firefox 中，单选按钮被选中并显示提示，单击“取消”按钮将返回上一个选项并保留所有值。

在 IE 中，单选按钮被选中并显示提示，但值被清除。如果单击“取消”，则不会选择单选按钮。

我希望它的工作方式是，如果您单击另一个单选按钮，除非您在提示上单击“确定”，否则它不应该选择它。如果单击“取消”，则应保留这些值。

【问题讨论】：

标签： jquery

【解决方案1】：

在 IE 中，复选框和单选按钮上的 change 事件不会立即触发，而只会在字段未聚焦后触发。这样，它的行为就像文本输入框。

jQuery 对change 事件的反应非常明显，以一种对您隐藏这种行为的方式。但是它无法准确再现 IE 中其他浏览器的行为，因此在某些情况下，即使另一个 click 事件处理程序试图阻止默认，它也会触发 change 以响应与元素的交互。

另一个问题：在 IE 中，如果您在单选按钮上从 click return false，则不会选中新的单选按钮，但之前的按钮仍将失去选中状态，从而使您没有选中任何单选按钮！

因此，您可能不得不进行某种烦人的状态跟踪，并在确认被拒绝时手动将单选按钮恢复到原来的状态。例如：

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

【讨论】：

这是真的，从我作为答案的一部分汇总的演示中可以看出。

【解决方案2】：

为了确保选择实际发生变化，请将函数调用放在 .change 事件处理程序中并删除 .click 事件处理程序。

$("input[name='pick_up_point']").change(function(event) 
{ 
 if(confirm('Address details will be cleared. Continue?')) 
 { 
   clearInputFields();  
   return true; 
 } 
 else 
 { 
  return false; 
 } 
});

不太确定你是否需要 return xx 语句，但我不知道你们其余的代码库，所以我把它们留在了那里。

编辑：

为了演示 .change 与 .click 的效果（实际更改），我在这里整理了一个小演示：

http://jsfiddle.net/KMjan/

注意计数器的增量并显示在底部（不是花哨，但说明了这一点）

EDIT2：添加了在 .click 和 .change 事件中调用 clear 函数的效果的一些指示

http://jsfiddle.net/KMjan/1/

EDIT3：添加了另一个演示，其中我将事件气泡上的背景颜色设置为父 div 以演示返回值的效果（true 和 false） - 只需多次单击相同的单选按钮，然后更改 - 使用否定和肯定的答案来查看每个选择的结果。

http://jsfiddle.net/KMjan/3/

这些表明需要事件传播方法，如果效果不理想，您可能需要调查。
有关事件传播的详细信息，请参阅此页面： http://api.jquery.com/category/events/

【讨论】：