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

我是JavaScript新手，我正在尝试制作一个网站，您可以购买三明治，但它是不会发布的原型网站。到目前为止，我对JavaScript的代码：让js单选按钮有多个选择而不是单个选择？

代码：

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

<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>

到目前为止，我有它工作的东西，如收集或交付作为其唯一的一个选择。但我正在努力让它可以让用户从可用的肉类中选择4或更少。我真的不知道我错在哪里，任何帮助将不胜感激！

来源

2017-04-18 Orry Kaplan

哎呦。正如易卜拉欣指出的那样。你所需要做的就是使用不同的name =“...”标签。您只能选择一个肉类2。我不确定你如何限制为四个。 –

@ htr5我觉得这很安静。 –

我确实有他们作为一个复选框，所以我可能只是切换回来。你知道如果我可以使用js将值分配给单选按钮和清单按钮（如果它们都是一个网页的话）吗？ –

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

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

单选按钮用于选择一组选项中的一个选项。

来源

2017-04-18 00:59:42

正如@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，因为它在每次调用地址组中的所有复选框，不论是哪一个实际被点击的。

来源

2017-04-18 01:09:24

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

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>'); 
 
}

<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>

来源

2017-04-18 02:14:11 Teocci

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

回答

相关问题