javascript - 已填充单选按钮，想要使用提交按钮打印值

Question

有没有办法从单选按钮中获取值？说它被填充在单选按钮中，选项有 Abuelos、Boogie Burger、Pad Thai、Coalition Pizza、Wild Eggs。有没有办法可以在点击提交按钮后将这些值取出并打印出来？

我也不希望该值被重定向到另一个页面。我只想将其打印在提交按钮下方。我也不希望用户在点击提交按钮后能够选择一个值

我正在尝试进行投票，其中从多个数组中获取选项，然后有人可以从单选按钮中选择一个值，然后单击提交按钮并打印出他们的选项。这样用户就可以知道他们投票了什么。

部分HTML代码:

    <form action="" id="food-form"></form>

Javascript代码:

var mexicanFood = ["Caliente Mexican", "Abuelos", "Luciana's"],
    asianFood = ["Omoni Korean", "Super Bowl Pho", "Sichuan Chinese", "Tian Fu Asian Bistro"],
    americanFood = ["Boogie Burger", "City Barbeque", "The North End BBQ", "Wolfies Grill", "Bubs", "Fire on the Monon"];
    pizza = ["Coalition Pizza", "Mackenzie River Pizza, Grill & Pub", "Bazbeaux Pizza", "Mellow Mushroom"]
    thaiFood = ["Pad Thai", "Jasmine Thai", "Thai Orchid"]
    notCategory = ["Jamaican Reggae Grill", "Mudbugs", "Yats", "Kolache Factory", ]
    breakfast = ["Wild Eggs", "Egg and I", "Another Broken Egg Cafe", "Cafe Patachou"]

function createRandomArray(arraySize) {
    var allFoods = mexicanFood.concat(asianFood).concat(americanFood).concat(pizza).concat(thaiFood).concat(notCategory).concat(breakfast),
        randomFoods = [];

    if (arraySize <= allFoods.length) {
        randomFoods = [
            mexicanFood[getRandomArrayIndex(mexicanFood)],
            asianFood[getRandomArrayIndex(asianFood)],
            americanFood[getRandomArrayIndex(americanFood)],
            pizza[getRandomArrayIndex(pizza)],
            thaiFood[getRandomArrayIndex(thaiFood)],
            notCategory[getRandomArrayIndex(notCategory)],
            breakfast[getRandomArrayIndex(breakfast)]
        ]; // at least one from each

        // remove the ones that were initially added from each
        allFoods.splice(allFoods.indexOf(randomFoods[0]), 1);
        allFoods.splice(allFoods.indexOf(randomFoods[1]), 1);
        allFoods.splice(allFoods.indexOf(randomFoods[2]), 1);

        for (var i = 0; i < arraySize - 3; i++) {
            var randomIndex = getRandomArrayIndex(allFoods);

            randomFoods.push(allFoods[randomIndex]);
            allFoods.splice(randomIndex, 1);
        }

        return randomFoods;
    }

    return allFoods; // requesting more items of food than the amount available, so just add them all
}

function getRandomArrayIndex(array) {
    return Math.floor(Math.random() * array.length);
}

var randomFoods = createRandomArray(5);

for (var i = 0; i < randomFoods.length; i++) {
    document.getElementById('food-form').innerHTML += '<input type="radio" name="food" value="' + randomFoods[i] + '"> ' + randomFoods[i] + '<br>';
}

Answer 1

您可以使用 document.querySelector('input[name=food]:checked').value 获取所选值。

var mexicanFood = ["Caliente Mexican", "Abuelos", "Luciana's"],
  asianFood = ["Omoni Korean", "Super Bowl Pho", "Sichuan Chinese", "Tian Fu Asian Bistro"],
  americanFood = ["Boogie Burger", "City Barbeque", "The North End BBQ", "Wolfies Grill", "Bubs", "Fire on the Monon"];
pizza = ["Coalition Pizza", "Mackenzie River Pizza, Grill & Pub", "Bazbeaux Pizza", "Mellow Mushroom"]
thaiFood = ["Pad Thai", "Jasmine Thai", "Thai Orchid"]
notCategory = ["Jamaican Reggae Grill", "Mudbugs", "Yats", "Kolache Factory", ]
breakfast = ["Wild Eggs", "Egg and I", "Another Broken Egg Cafe", "Cafe Patachou"]

function createRandomArray(arraySize) {
  var allFoods = mexicanFood.concat(asianFood).concat(americanFood).concat(pizza).concat(thaiFood).concat(notCategory).concat(breakfast),
    randomFoods = [];

  if (arraySize <= allFoods.length) {
    randomFoods = [
      mexicanFood[getRandomArrayIndex(mexicanFood)],
      asianFood[getRandomArrayIndex(asianFood)],
      americanFood[getRandomArrayIndex(americanFood)],
      pizza[getRandomArrayIndex(pizza)],
      thaiFood[getRandomArrayIndex(thaiFood)],
      notCategory[getRandomArrayIndex(notCategory)],
      breakfast[getRandomArrayIndex(breakfast)]
    ]; // at least one from each

    // remove the ones that were initially added from each
    allFoods.splice(allFoods.indexOf(randomFoods[0]), 1);
    allFoods.splice(allFoods.indexOf(randomFoods[1]), 1);
    allFoods.splice(allFoods.indexOf(randomFoods[2]), 1);

    for (var i = 0; i < arraySize - 3; i++) {
      var randomIndex = getRandomArrayIndex(allFoods);
      randomFoods.push(allFoods[randomIndex]);
      allFoods.splice(randomIndex, 1);
    }

    return randomFoods;
  }

  return allFoods; // requesting more items of food than the amount available, so just add them all
}

function getRandomArrayIndex(array) {
  return Math.floor(Math.random() * array.length);
}

var randomFoods = createRandomArray(5);

for (var i = 0; i < randomFoods.length; i++) {
  document.getElementById('food-form').innerHTML += '<input type="radio" name="food" value="' + randomFoods[i] + '"> ' + randomFoods[i] + '<br>';
}

function print() {
  var t = document.querySelector('input[name=food]:checked');

  if (t == null)
    console.log('No value selected');
  else
    console.log(t.value);
}

<form action="" id="food-form">
</form>
<input type="submit" id="btn" value="Submit" onClick="print()">