javascript - 在 jQuery 中使用循环创建的无线电输入都被分配了相同的值

Question

第一次在这里发帖。我正在尝试制作一个电影推荐器，如果用户没有看过这部电影，它会向用户展示一组电影，以 1-10 的无线电等级进行评分，并带有“不评分”按钮。我一直在尝试遍历所有选中的按钮以获取它们的值，但是它们都作为分配给无线电输入中第一个“无评级”按钮的值出现，该按钮被附加到内部循环之前的表中执行。任何人都可以阐明发生了什么吗？我在 JS 或 jQuery 方面没有太多经验，并且一直有我的兄弟帮助我。这是我的代码：

for (let i = 0; i<keys.length; i++) {
...
    let $movieRating = $('<tr class="rating-row">')
...
// Add initial "No Rating" button
    let $ratingButton = $('<td>');
    $ratingButton.append($(`<input type="radio" class="ratButton" id="rating${i}-0"
      name="rating${i}" value=null><label for="rating${i}-0">No Rating</label>`));
// Add 1-10 buttons   
    for (let j=1; j <= 10; j++) {
        $ratingButton.append($(`<input type="radio" class="ratButton" id="rating${i}-${j}"
          name="rating${i}" value="${j}"><label for="rating${i}-${j}">${j}</label>`));
    }
    $movieRating.append($ratingButton);
    $("table tbody").append($movieRating);

我将“No Rating”按钮的值设置为 null，然后 1-10 按钮的值应该设置为 ${j}。我正在使用以下方法提取值：

$('.rating-row').each(function(idx, row) {
    let $radioButton = $(row).find('input:radio');
    if ($radioButton.is(':checked')) {
        let radioVal = $radioButton.val();
         console.log(radioVal);
    }
})

无论检查什么，radioVal 总是出现空值。我希望这很清楚。也欢迎格式化提示。非常感谢！

标签： javascripthtmljqueryradio-button

Answer 1

问题似乎与$radioButton.

let $radioButton = $(row).find('input:radio');

它包含不是 1 个而是 11 个单选按钮（每个单选按钮都rating-row添加了 11 个单选按钮）。

它们应该使用.each()call 进行迭代，如下所示

let $radioButtons = $(row).find('input:radio');
$radioButtons.each(function (ind, radioButton){
  const $radioButton = $(radioButton);
  if ($radioButton.is(':checked')) {
    let radioVal = $radioButton.val();
    console.log(radioVal);
  }
})

这是一个工作原型：

let keys = [0, 1, 2];
for (let i = 0; i < keys.length; i++) {
    let $movieRating = $('<tr class="rating-row">')
    let $ratingButton = $('<td>');
    $ratingButton.append($(`<input type="radio" class="ratButton" id="rating${i}-0"
name="rating${i}" value=null><label for="rating${i}-0">No Rating</label>`));
    for (let j = 1; j <= 10; j++) {
        $ratingButton.append($(`<input type="radio" class="ratButton" id="rating${i}-${j}"
    name="rating${i}" value="${j}"><label for="rating${i}-${j}">${j}</label>`));
    }
    $movieRating.append($ratingButton);
    $("table tbody").append($movieRating);
}

$('#check').on('click', function () {
    $('.rating-row').each(function (idx, row) {
        let $radioButtons = $(row).find('input:radio');
        $radioButtons.each(function (ind, radioButton) {
            $radioButton = $(radioButton)
            if ($radioButton.is(':checked')) {
                let radioName = $radioButton.attr('name');
                let radioVal = $radioButton.val();
                console.log(radioName + ' = ' + radioVal);
            }
        })

    })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
    <tbody>
    </tbody>
</table>
<button id="check">Check</button>