在类似 AJAX 的场景中单击后未选中单选按钮答案

【问题标题】：Radio button unchecked after clicked in AJAX-like scenario在类似 AJAX 的场景中单击后未选中单选按钮
【发布时间】：2011-06-02 03:10:09
【问题描述】：

我有一个文本字段，它的更改事件绑定到一个验证文本字段值的函数，并可能将相应的验证错误消息拼接到文本字段上方的 DOM 中。如果通过单击一对有些不相关的单选按钮中的一个触发更改事件，则单击的单选按钮会获得焦点，但与我和用户的期望相反，它没有被选中 - 这就是问题所在。

虽然最终系统中的验证会在服务器端使用AJAX进行，但下面的代码说明AJAX与问题无关。

你能告诉我我在这里缺少什么吗：

<html>
<head>                                                                  
<STYLE type="text/css">
    .highlighted { color: red; }
</STYLE>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>          
</head>                                                                 
<body>                                                                  

<span id="errors">
</span>

<label for="mytextfield">First, type something in this textfield</>
<input type="text" id="mytextfield" name="mytextfield"/>

<p>Second, click on one of these radio buttons</>

<INPUT TYPE="radio" NAME="binaryquestion" VALUE="Y" >Yes</>
<INPUT TYPE="radio" NAME="binaryquestion" VALUE="N" >No</>

<script type="text/javascript">
    $(document).ready(function() {
        //$("#mytextfield").change(validateTextField);
        $("#mytextfield").change(spliceInTheValidationResultMessage);
    });

    function validateTextField() {
            $.ajax({
                url: 'http://www.google.com',
                success: function(data) {
                    spliceInTheValidationResultMessage();
                }
            });
    }

    function spliceInTheValidationResultMessage() {
        $("#errors").append("<p>Thank you for your input!</p>").addClass("highlighted");
        alert("I expect the radio button that you clicked to become checked. However, close this dialog and you'll see that it will have gained the focus but is NOT checked!");
    };

</script>
</body> 
</html>

【问题讨论】：

试图改变单选按钮状态的代码在哪里？我看不到。
没有这样的代码。如果您将页面加载到浏览器中并单击其中一个单选按钮，问题是单选按钮是否被选中取决于您没有首先在文本字段中输入内容。
对问题定义的进一步细化：问题是单选按钮是否被选中取决于您没有事先在文本字段中输入内容。

标签： dom radio-button jquery-events checked mutation-events

【解决方案1】：

很抱歉，我在执行您要执行的操作时遇到了一些问题，但是您是否要执行这样的操作？

<input id="radio1" type="radio" name="binaryquestion" value="Y">Yes</>
<input id="radio2" type="radio" name="binaryquestion" value="N">No</>
<script type="text/javascript">$(document).ready(function () {
    //$("#mytextfield").change(validateTextField);
    //$("#mytextfield").change(spliceInTheValidationResultMessage);
    $("#radio1").bind("click", spliceInTheValidationResultMessage, false);
    $("#radio2").bind("click", spliceInTheValidationResultMessage, false);
});

我只是简单地将 id 属性添加到您的单选按钮输入并在它们上使用 jQuery bind() 方法。您可能需要更改 validateTextField() 函数，以便它抓取文本字段中的文本。

【讨论】：

每次文本字段的值被视为已更改（即用户从文本字段单击（或制表符）到不同的字段，刚刚更改了文本字段的值），我的 Javascript 是需要在“错误”范围内报告任何文本字段值验证错误。这可以通过将文本字段的“onchange”函数绑定到 validateTextField 来实现。从文本字段切换到单选按钮并按空格键切换单选状态可以正常工作，而“直接”单击单选按钮无法使单击的按钮保持选中状态。
我刚刚意识到我还没有断言这个问题肯定与文本字段的 onchange 事件处理程序中的 DOM 突变直接相关。尽管在我的页面中单击单选按钮总是使该单选按钮具有焦点（按钮周围的虚线正方形）表明浏览器已识别单击，但就好像浏览器确定点击的内容部分受到 DOM 突变的影响（以及相关联的重新定位消息下方的所有内容）。