尝试获取所有选定的输入时，输入类型无线电数据值仅显示一个

问题描述

我正在尝试为自己做一个测验，我想要所选单选按钮的数据值和它们的数据值。所以我可以将它们作为数组或对象发送到 php 文件中。

这是我的代码：

let frm = $('#form');

    $('input[value="finished"]').on('click',function (e) {
        e.preventDefault();

        console.log($('input[type=radio]:checked').data('value'));

        $.ajax({
            type: frm.attr('method'),url: "ajax/quiz.php",data: frm.serialize(),success: function (data) {

            },}).done(function (data) {

        });
    });

有谁知道为什么它只显示一个？因为我已经搜索了一段时间，很多人都推荐这个选项。

Can't get input radio selected value

我也试过这个： How to get the selected radio button’s value?

但它仍然向我显示一个数据值。

解决方法

您可以通过多种方式做到这一点。我在下面展示了两种错误的方法和两种正确的方法：

$(function() {
    let frm = $('#form');

    $('input[value="finished"]').on('click',function (e) {
        e.preventDefault();

        /*console.log($('input[type=radio]:checked').data('value'));

        $.ajax({
            type: frm.attr('method'),url: "ajax/quiz.php",data: frm.serialize(),success: function (data) {

            },}).done(function (data) {

        });*/
        let output = document.getElementById("output");
        let val = $('input[type=radio]:checked').val();
        let data = $('input[type=radio]:checked').data('value');
        let serialized = frm.serialize();
        let accumulated = [...document.querySelectorAll('input[type=radio]:checked')].map((item) => `${item.name}=${item.value}`).join("&");
        output.innerHTML += `<p>val(): ${val}</p>`;
        output.innerHTML += `<p>data('value'): ${data}</p>`;
        output.innerHTML += `<p>serialized: ${serialized}</p>`; //works
        output.innerHTML += `<p>accumulated: ${accumulated}</p>`; //works
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form">
    <input type="radio" name="question1" value="answer1_1">
    <input type="radio" name="question1" value="answer1_2">
    <input type="radio" name="question2" value="answer2_1">
    <input type="radio" name="question2" value="answer2_2">
    <input type="submit" value="finished">
</form>

<div id="output"></div>

,

如果您坚持将值保存在 dataset (<input data-value="" />) 中，您可以这样做：

const values = $('input[type=radio]:checked')
  .map(function() {
    return $(this).data('value')
  })
  .get();

现在，values 是选定单选框中所有 data-value 值的数组。

您可以在此处阅读有关 jQuery 的 map 的更多信息：https://api.jquery.com/map/