JQuery获取单选按钮选择答案

【问题标题】：JQuery get radio button selectionJQuery获取单选按钮选择
【发布时间】：2015-03-28 04:19:14
【问题描述】：

我正在尝试使用 JQuery 和 Ajax 提交一组表单。表单并不总是具有相同数量的输入或元素的相同名称。

除了获取选中的单选按钮的值之外，该代码适用于我所拥有的内容。它总是返回最后一个单选按钮的值。

这是我获取表单数据的方式：

var values = {};
var formdata = new FormData();
$('form :input').each(function()
{
    formdata.append(this.name, $(this).val());
});

我也试过了：

$('form.ajax :input, form.ajax input[type=radio]:checked').each(function()

获取选中的单选按钮值的正确方法是什么？我希望不必为我提交的每个表单编写单独的函数。

【问题讨论】：

我假设你的单选按钮有一个name 属性 - 所以$(":radio[name=yourName]").val()
这样你就可以接受所有输入，因为单选按钮具有相同的名称，所以值会被覆盖

标签： javascript php jquery html ajax

【解决方案1】：

首先您可以选择除复选框和单选之外的所有输入元素，然后附加所选复选框和单选元素的值

var values = {};
var formdata = new FormData();
$('form').find(':input:not(:checkbox, :radio)').each(function () {
    formdata.append(this.name, $(this).val());
});

$('form').find(':checkbox:checked, :radio:checked').each(function () {
    formdata.append(this.name, $(this).val());
});

您为什么不尝试以下方法而不是手动创建表单数据

var formdata = new FormData($('form')[0]);

【讨论】：

谢谢。最后一行正是我所需要的。完美运行。

【解决方案2】：

您的代码正在遍历所有输入（包括单选按钮）并将它们的名称-值对添加到表单数据中。问题在于，如果您有多个单选按钮，您将只能看到最后一个名称-值对，因为所有单选按钮都具有相同的名称。

为了正确处理单选按钮，您需要检查this.checked == true，这意味着这个特定的单选按钮是选中的：

$('form :input').each(function()
{
    if (this.type == 'radio' && !this.checked)
    {
        // this is a radio button, but it's not checked, so skip it
        return;
    }
    formdata.append(this.name, $(this).val());
});

【讨论】：

【解决方案3】：

要获取页面上每个选中的单选按钮的值，只需遍历它们，仅过滤选中的单选输入并在每次出现时运行您想要的任何代码。

var formData = new FormData();

$('input[type=radio]').filter(':checked').each(function () {
    var inputField = $(this);
    formData.append(inputField.attr('name'), inputField.val());
});

【讨论】：

【解决方案4】：

在通过 Ajax 发送之前，您需要序列化所选单选按钮的列表。

var radioChecked = $(":radio").serialize();
$.ajax(
        {
             url: _action_url,
             data: radioChecked,
             success: function(result){
                 // What do we do when success
             }
        }
        );

【讨论】：