jQuery、AJAX 表单处理 - 单选按钮值问题，

Question

我有以下表格 - 我的 A.php 中有 2 个单选按钮

<form action="form_processing.php" method="post" id ="myForm">
    <div class="radio-inline">
     <label>
      <input type="radio" name="direction" id="direction" value="up" checked>Up
     </label>
    </div>
    <div class="radio-inline">
     <label>
      <input type="radio" name="direction" id="direction" value="down" >Down
     </label>
    </div>
    <input type="hidden" name="status" value="false">   
    <br/>
    <button type="submit" name="sub" id="sub">Submit</button>
</form>

那么我就有了下面的jQuery A.js，

$('#myForm').on('submit', function(){
    var that = $(this),
        url = that.attr('action'),
        type = that.attr('method'),
        data = {};

    that.find('[name]').each(function(index, value){
        var that = $(this),
        name = that.attr('name'),
        value = that.val();

        data[name] = value;
    });

    $.ajax({
        url: url,
        type: type,
        data: data,
        success: function(response){
            console.log(response);
        }
    });
    return false;
});

然后在我的 form_processing.php 上，我得到了，

<?php 
    print_r($_POST);
?>

当我监控我的控制台时，无论我在做什么，我总是最终得到...

Array
(
    [direction] => down
    [status] => false
)

我花了 2 天时间试图弄清楚，但是.. 找不到问题的原因，为什么收音机的值没有更新....

更具体地说 - 适用于 IE10/11，不适用于 chrome（试图清除浏览数据等...仍然无法正常工作）

有人可以指导我哪里出错了吗？

非常感谢，

Answer 1

问题在于，无论是否选中单选按钮，您都在手动循环所有输入。因此，当您位于与第一个同名的第二个单选按钮时，您会覆盖之前的值。

你应该让 jQuery 来处理这个问题：

data: $(this).serialize(),

您当然可以手动检查输入的类型以及是否也检查...

正如我在评论中提到的，您应该只在每页使用一次 ID，因为 ID 必须是唯一的，但这与您的问题无关。