jQuery单击处理程序后，锚元素内的单选按钮被重置答案

【问题标题】：Radio button inside anchor element is reset after jQuery click handlerjQuery单击处理程序后，锚元素内的单选按钮被重置
【发布时间】：2011-06-04 14:28:20
【问题描述】：

我遇到了一种情况，其中一个元素（radio 类型）包含在一个元素中。锚元素有一个 href，但我想通过向元素添加一个 jQuery 'click' 处理程序来覆盖该行为。

单击处理程序使其中的单选按钮成为组中的选定单选按钮。这一切都在单击锚点时起作用，但是，当单击单选按钮时，jQuery 似乎将选定的单选重置为先前选择的单选！

这是一个重复问题的简化页面：

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $("#a1").click(function(event) {
                anchorClicked("a1");
                return false;
            });
            $("#a2").click(function(event) {
                anchorClicked("a2");
                return false;
            });
        });

        function anchorClicked(anchorId)  {
            $('#' + anchorId + ' input:radio').attr("checked", true);
            alert("Look at what is selected and what happens after the event when this dialog is closed!");
        }
    </script>
</head>
<body>
    <form>
        <ul>
            <li id="li1"> 
                <a id="a1" href="javascript:alert('default functionality')">
                    <input value="1" name="rb" type="radio" id="rb1">
                    <span>Details 1</span>
                </a>
             </li>
            <li id="li2"> 
                <a id="a2" href="javascript:alert('default functionality')">
                    <input value="2" name="rb" type="radio" id="rb2">
                    <span>Details 2</span>
                </a>
             </li>
        </ul>
    </form>
</body>

有人知道如何防止 jQuery 重置单选按钮吗？

【问题讨论】：

标签： javascript jquery anchor radio

【解决方案1】：

<script type="text/javascript">
    $(document).ready(function() {
        $("input:radio").click(function(event){event.stopPropagation();});

    });

【讨论】：

抱歉，Jishnu 这并不能解决问题。单击未选中的单选按钮后，之前选中的单选按钮保持选中状态。
@Jishnu 原来你也有答案。
Jishnu/Marcus，虽然这个解决方案允许选择单选按钮，但它绕过了我仍然需要调用的 anchorClicked 方法。
为所有要绕过点击事件的单选按钮赋予属性name='somename'并使用代码$("input[name='somename']").click(function(event){event.stopPropagation();})

【解决方案2】：

这是一种有点奇怪的做事方式。您可以通过首先使用label 元素而不是像这样的跨度来获得您想要的效果：

<label><input value="1" name="rb" type="radio" id="rb1" /> Details One</label>
<label><input value="2" name="rb" type="radio" id="rb2" /> Details Two</label>

通过单击label 元素中的任意位置将选中单选按钮。

如果您愿意，您应该从那里观察单选按钮上的更改事件：

$('input:radio[name="rb"]').change(function() {
    if (this.checked) {
        alert('remember the deselected radio button changes also');
    }
});

【讨论】：

马库斯，感谢您的帮助。但是我被锚元素卡住了。
抱歉打断我的评论。 html 由 ASP.Net 应用程序生成，锚点来自 LinkButtons。 [注：我无法将 LinkButtons 更改为其他任何内容。
没问题，我添加了另一个解决该限制的答案。

【解决方案3】：

$('input:radio').click(function(e) { 
    e.stopPropagation();
});

$('a[id^="a"]').click(function(e) {
    $('input:radio:first', this).attr("checked", true);
    return false;
});

重要的部分是在单击单选按钮时停止传播单击事件。但是，如果您返回 false，则似乎不会像您期望的那样选择单选按钮。

接下来我们将点击事件绑定到任何a 标签，它的id 以字母“a”开头。单击时，a 标记内的第一个单选按钮输入被选中，然后被选中。

演示： http://jsfiddle.net/marcuswhybrow/mg66T/2/

【讨论】：

Marcus，这与我在问题中的 anchorClicked 方法相同。问题是，一旦选择了一个单选按钮，就无法通过单击来选择另一个单选按钮。它最初被选中，但一旦单击事件处理程序完成，它就会被取消选中。
您是否尝试过此代码（修改为添加return false），我认为您的代码不起作用，因为设置稍微复杂。没有理由不这样做。
@Marcus Whybrow ：你的假设是错误的。它不起作用，因为您的 return false 正在取消单选按钮的操作，从而改变了它已更改的事实。请参阅我的回答，了解一些实际演示的示例。
@GrievousAngel 我把你的代码变成了一个演示here，它似乎工作得很好。所以肯定有其他问题。
@GrievousAngel 我明白你现在的意思了，问题似乎是单击了单选按钮，然后单击了锚点。

【解决方案4】：

我发现解决此问题的最简单方法是在单击事件期间从锚元素中删除 href 属性：

  $("#a1").click(function(event) {
    this.removeAttribute("href");            
    anchorClicked("a1");
  });

这意味着我不再需要返回 false 来阻止默认行为，并且事件可以安全地冒泡 DOM，然后一切正常。

【讨论】：

刚刚注意到你打败了我。 :) 是的，问题是取消了单选按钮更改事件，所以这行得通。
但是你不能点击没有href属性的锚点，至少它不是一个有效的标签。
浏览器可能不提供它是一个链接的视觉指示器，但我认为我可以提供一个 :hover css 规则来更改指针，我还没有这样做不能确定.

【解决方案5】：

问题在于，取消默认锚标记行为的“返回 false”也取消了单击单选按钮的行为，因此无论单击事件的操作如何，它都会将其设置回原来的状态.将函数设置为返回 true 会表现出预期的行为（以及默认的点击功能）。

要最终修复它，您希望完全摆脱默认的点击事件。为此，您可以非常简单地将href 更改为“#”，这样在操作时它不会做太多事情。请参阅 http://jsfiddle.net/FrcRx/1/ 以了解此操作的示例。

最好的方法是完全删除 href 属性。这当然会使大多数浏览器不将其视为链接，因此您需要自己应用适当的样式以使它们看起来仍然像链接。

这是通过 removeAttr jquery 函数和 addClass 函数完成的。在这里查看它的演示：http://jsfiddle.net/FrcRx/2/

【讨论】：