jsラジオボタンが1つの選択肢の代わりに複数の選択肢を持つようになっていますか？

Question

私はjavascriptには新しく、サンドイッチを購入できるウェブサイトを作ろうとしていますが、公開されていないプロトタイプサイトです。これまでのところ、私はjavascriptのためにこのコードを持っている：

コード：

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つ以下を選ぶことができるようにしています。私はどこが間違っているのか本当に分からない、どんな助けも大いに評価されるだろう！

Answer 1

この場合、チェックボックスを使用する必要があります。

複数のオプションを選択できる場合は、チェックボックスを使用します。

ラジオボタンは、オプショングループのうち1つのオプションを選択できる場合に使用されます。

Answer 2

@KyleRichardsonによると、ラジオボタンではなくチェックボックスを使用します。

は仮定：

• "肉" のチェックボックスのグループがid="meats"有する容器です。
• クリックハンドラはHTMLではなく、javascriptで添付されています。

  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

  それは関係なく、実際にクリックされた1の、すべての呼び出しで、グループ内のすべてのチェックボックスを扱うための機能でidを使用する必要は、ありません

。

Answer 3

私はあなたのためにこの代替案を作成しました。複数の肉を選択できるように入力の名前を変更します。

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>