Question

我是javascript的新手，我正在尝试创建一个可以购买三明治的网站，但它是一个不会发布的原型网站。到目前为止，我有javascript的代码：

代码：

＆＃13;

function selectmeat2(id) {
  for (var i = 1; i <= 4; i++) {
    document.getElementById("Check" + i).checked = false;
  }
  document.getElementById(id).checked = true;
}

＆＃13;

<h3>Meat 2 (Optional - Extra £1.50)</h3>
Pepperoni<input type="radio" name="meat2" value="pepperoni" onclick="selectmeat2(id)" id="pepperoni" /><br> Sausage
<input type="radio" name="meat2" value="sausage" onclick="selectmeat2(id)" id="sausage" /><br> Jerk Chicken<input type="radio" name="meat2" value="jerk chicken" onclick="selectmeat2(id)" id="jerk chicken" /><br> Chorizo
<input type="radio" name="meat2" value="chorizo" onclick="selectmeat2(id)" id="chorizo" /><br> Bacon
<input type="radio" name="meat2" value="bacon" onclick="selectmeat2(id)" id="bacon" /><br> Steak
<input type="radio" name="meat2" value="steak" onclick="selectmeat2(id)" id="steak" /><br> Meatballs
<input type="radio" name="meat2" value="meatballs" onclick="selectmeat2(id)" id="meatballs" /><br> Pepperoni
<input type="radio" name="meat2" value="pepperoni" onclick="selectmeat2(id)" id="pepperoni" /><br> Ham
<input type="radio" name="meat2" value="ham" onclick="selectmeat2(id)" id="ham" /><br> BBQ Beef<input type="radio" name="meat2" value="bbq beef" onclick="selectmeat2(id)" id="bbq beef" /><br> Tuna
<input type="radio" name="meat2" value="tuna" onclick="selectmeat2(id)" id="tuna" /><br> Plain Chicken<input type="radio" name="meat2" value="plain chicken" onclick="selectmeat2(id)" id="plain chicken" /><br>
<hr>

＆＃13;

到目前为止，我已经将它作为收集或交付等工作作为唯一的选择。但我正在努力使用户可以从肉类中选择4种或更少。我真的不确定我哪里出错了，任何帮助都会非常感激！

Answer 1

在这种情况下你应该使用复选框。

可以选择多个选项时使用复选框。

当可以选择一组选项中的一个选项时，使用单选按钮。

Answer 2

正如@KyleRichardson所说，使用复选框，而不是单选按钮。

假设：

“肉类”复选框组位于id="meats"。
点击处理程序附加在javascript中，而不是HTML中。

var $meatsInput = $("#meats input"),
    maxMeats = 4;
$meatsInput.on('click', function() {
    // Count up the number of checked checkboxes
    var n = $meatsInput.get().reduce(function(n, el) {
        return n + el.checked;
    }, 0);
    // If the maximum is reached, then disable all other checkboxes to prevent their selection.
    // By leaving the checked checkboxes enabled, they can be unchecked.
    $meatsInput.get().forEach(function(el) {
        el.disabled = n >= maxMeats && !el.checked;
    });
});

<强> DEMO

不需要在函数中使用id，因为它会在每次调用时解决组中的所有复选框，无论实际点击哪一个。

Answer 3

我为你做了这个选择。更改输入的名称，以便您可以选择多个肉。

＆＃13;

var maxMeats = 4;
var currentMeats = [];

function selectMeat(id) {
  var index = currentMeats.indexOf(id)
  document.getElementById(id).checked = false;

  if (index > -1) {
    currentMeats.splice(index, 1);
  } else {
    if (currentMeats.length < maxMeats) {
      currentMeats.push(id);
      document.getElementById(id).checked = true;
    } else {
      alert('You can choose 4 or less from the available meats.');
    }
  }

  document.getElementById('meats').innerHTML = currentMeats.join('</br>');
}

＆＃13;

<h3>Meat 2 (Optional - Extra £1.50)</h3>
Pepperoni<input type="radio" name="pepperoni" value="pepperoni" onclick="selectMeat(id)" id="pepperoni" /><br> Sausage <input type="radio" name="sausage" value="sausage" onclick="selectMeat(id)" id="sausage" /><br> Jerk Chicken<input type="radio" name="jerk_chicken"
  value="jerk_chicken" onclick="selectMeat(id)" id="jerk_chicken" /><br> Chorizo
<input type="radio" name="chorizo" value="chorizo" onclick="selectMeat(id)" id="chorizo" /><br> Bacon
<input type="radio" name="bacon" value="bacon" onclick="selectMeat(id)" id="bacon" /><br> Steak
<input type="radio" name="steak" value="steak" onclick="selectMeat(id)" id="steak" /><br> Meatballs
<input type="radio" name="meatballs" value="meatballs" onclick="selectMeat(id)" id="meatballs" /><br> Ham
<input type="radio" name="ham" value="ham" onclick="selectMeat(id)" id="ham" /><br> BBQ Beef<input type="radio" name="bbq_beef" value="bbq_beef" onclick="selectMeat(id)" id="bbq_beef" /><br> Tuna
<input type="radio" name="tuna" value="tuna" onclick="selectMeat(id)" id="tuna" /><br> Plain Chicken<input type="radio" name="plain_chicken" value="plain_chicken" onclick="selectMeat(id)" id="plain_chicken" /><br>
<hr>

<div id="meats"></div>

＆＃13;

让js单选按钮有多个选择而不是一个选择？

3 个答案: