单选按钮集jQuery点击/更改功能

Question

我有一个单选按钮集称为“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中“OK”，在IE中无法正常工作。

在Firefox中，选中单选按钮并显示提示，单击取消按钮将返回到前一选项，并保留所有值。

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

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

Answer 1

在IE浏览器中，change事件的复选框和单选按钮不会立即触发，但只有后场一直没有重点。这样就像文本输入框一样。

jQuery猴子与change事件相当显着，以一种隐藏你的行为。但是，它无法准确地再现IE中其他浏览器的行为，因此在某些情况下，即使在另一个click事件处理程序试图阻止默认设置时，它也会触发change以响应与某个元素的交互。

另一个问题：在IE中，如果你在单选按钮上有return false从click，那么新的单选按钮将不会被检查，但是上一个按钮仍然会失去它的检查，而没有检查到收音机！

所以你可能不得不做一些恼人的状态跟踪，并且当确认被拒绝时手动将单选按钮恢复到它们的旧状态。例如：

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

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

不是很确定你需要返回xx语句，但我不知道你的其他代码库，所以我把它们留在那里。

编辑：

为了证明.change V字形。点击效果（实际的变化），我已经把一个小演示在这里：

http://jsfiddle.net/KMjan/

注意计数器增量和显示在底部（不花哨，但演示点）

编辑2：添加了一些指示调用清除功能的事件内的.click和.change

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

EDIT3：增加了又一例证，我在事件泡沫的背景颜色设置为父div来展示的返回值的效果（true和false） - 只需点击同一个单选按钮多次，并且更改 - 使用否定和肯定答案查看每个选择的结果。

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

这些显示您可能要进行调查，如果效果所需的没有事件传播史方法的需要。
看到这个页面的详细信息，事件传播史： http://api.jquery.com/category/events/