logo标签列表

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

javascriptjqueryradio-buttonanchor
3

我有这样一种情况，一个类型为radio的元素包含在一个a元素中。anchor元素具有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重置单选按钮？
5个回答
3
<script type="text/javascript">
    $(document).ready(function() {
        $("input:radio").click(function(event){event.stopPropagation();});

    });
抱歉，Jishnu，这并没有解决问题。在单击未选中的单选按钮后，先前选择的单选按钮仍然保持选中状态。 - GrievousAngel
@Jishnu，事实证明你也有答案。 - Marcus Whybrow
Jishnu/Marcus，尽管这个解决方案允许选择单选按钮，但它绕过了anchorClicked方法，我仍然需要调用该方法。 - GrievousAngel
给所有你想要绕过点击事件的单选按钮添加属性 name='somename'，并使用代码 $("input[name='somename']").click(function(event){event.stopPropagation();})。 - Jishnu A P
0

这是一种稍微奇怪的做法。您可以通过首先使用

<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>

通过这样做，单击

从那里开始，如果您想要，可以监视单选按钮上的更改事件：

$('input:radio[name="rb"]').change(function() {
    if (this.checked) {
        alert('remember the deselected radio button changes also');
    }
});
Marcus，谢谢你的帮助。不过我现在卡在锚元素这里了。 - GrievousAngel
抱歉我之前的评论有点简短。这个HTML是由一个ASP.Net应用程序生成的，锚点来自于LinkButtons。[注意：我无法将LinkButtons更改为其他内容。] - GrievousAngel
没问题，我已经添加了另一个答案来解决那个限制。 - Marcus Whybrow
0
$('input:radio').click(function(e) { 
    e.stopPropagation();
});

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

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

接下来，我们将点击事件绑定到任何以字母"a"开头的a标签。当单击时，选择第一个a标签内的单选按钮输入，然后进行检查。

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

Marcus，这与我在问题中的anchorClicked方法相同。问题是一旦选择了其中一个单选按钮，就无法通过单击它来选择另一个单选按钮。它被初始选定，但一旦单击事件处理程序完成，它就会取消选择。 - GrievousAngel
你试过这段代码了吗（修改后加入return false）？我猜你的代码没能成功运行是因为设置稍微有些复杂。但实际上，这段代码没有任何问题。 - Marcus Whybrow
@Marcus Whybrow：你的假设是错误的。它没有起作用，因为你的返回false正在取消单选按钮的操作，从而改变了它被更改的事实。请参见我的答案，其中包含一些演示此操作的示例。 - Chris
@GrievousAngel 我已经将你的代码转换成演示版在这里，它似乎完美地运行了。因此，可能存在其他问题。 - Marcus Whybrow
@GrievousAngel 我现在明白你的意思了，问题似乎是单选按钮被点击，然后再点击锚点。 - Marcus Whybrow
@GrievousAnge，好的，我终于有了一个真正正确且能正常工作的答案。试一下吧，详见修改后的答案。 - Marcus Whybrow
0
我发现解决这个问题最简单的方法是在点击事件期间从锚元素中删除href属性：
  $("#a1").click(function(event) {
    this.removeAttribute("href");            
    anchorClicked("a1");
  });

这意味着我不再需要返回 false 来阻止默认行为，事件可以安全地冒泡到 DOM 并且一切都能正常工作。
刚注意到你比我先完成了。 :) 是的，问题在于取消了单选按钮更改事件，所以这样可以工作。 - Chris
但是，如果一个锚点没有href属性，你就不能点击它，至少它不是一个有效的标签。 - Marcus Whybrow
浏览器可能没有提供视觉指示它是一个链接，但我认为我可以提供:hover CSS规则来改变指针，不过我还没有这样做，所以不能确定。 - GrievousAngel
0
问题在于你的“return false”取消了默认锚点行为，也取消了单选按钮点击的行为，因此它将其设置回原始状态，而不考虑单击事件的操作。将函数设置为返回true会展现预期的行为（以及默认的单击函数）。
最终修复它的方法是完全摆脱默认的单击事件。为此，您可以非常简单地将href更改为“＃”，以便在执行操作时它不会做太多事情。请参见http://jsfiddle.net/FrcRx/1/，以查看此示例的操作。
最好的方法是完全删除href属性。当然，这使大多数浏览器不认为它是链接，因此您需要自己应用适当的样式来使它们仍然看起来像链接。
这是使用removeAttr jquery函数和addClass函数完成的。在此处查看其演示：http://jsfiddle.net/FrcRx/2/。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接