Заставить один флажок действовать как радиоприемник

Question

Итак, у меня есть эта форма заказа пиццы, и для топ-раздела я хочу, чтобы несколько вариантов можно было проверить.Например, пользователь может проверить пепперони, колбасу, оливки и т. Д. Но если пользователь выберет «Без начинок», я хочу, чтобы он снял остальные флажки.Я попытался написать немного JavaScript, чтобы сделать это, но это было нестабильно, и это работало только на клике.В общем, я не хочу, чтобы пользователи могли выбирать «без начинок», я хочу, чтобы больше ничего не выбиралось, а когда пользователи выбирают другой начинок, я не хочу, чтобы «без начинок» выбирался.Я надеюсь это имеет смысл!Любая помощь приветствуется!Вот мой код:

<script type="text/javascript">
  function unCheck(el, n){
    el.form.elements[n].checked = false;
  }
</script>

<table>
  <tr>
    <td style="border: none;">
      <input name="size" type="radio" value="8.00" id="small" 
             onclick="this.form.total.value=calculateTotal(this);" />
      <label for="small">Small ($8.00)</label>
    </td>
    <td style="border: none;">
      <input type="checkbox" name="topping" id="pepperoni" value="0.50" 
             onclick="this.form.total.value=calculateTotal(this);"/>
      <label for="pepperoni">Pepperoni</label>

      <input type="checkbox" name="topping" id="sausage" value="0.50" 
             onclick="this.form.total.value=calculateTotal(this);" />
      <label for="sausage">Sausage</label>
    </td>
  </tr>
  <tr>
    <td style="border: none;">
      <input name="size" type="radio" value="10.00" id="medium" 
             onclick="this.form.total.value=calculateTotal(this);" />
      <label for="medium">Medium ($10.00)</label>
    </td>
    <td style="border: none;">
      <input type="checkbox" name="topping" id="mushroom" value="0.50" 
             onclick="this.form.total.value=calculateTotal(this);" />
      <label for="mushroom">Mushroom</label>

      <input type="checkbox" name="topping" id="olive" value="0.50"
             onclick="this.form.total.value=calculateTotal(this);" />
      <label for="olive">Olive</label>
    </td>
  </tr>
  <tr>
    <td style="border: none;">
      <input name="size" type="radio" value="12.00" id="large" 
        onclick="this.form.total.value=calculateTotal(this);"/>
      <label for="large">Large ($12.00)</label>
    </td>
    <td style="border: none;">
      <input type="checkbox" name="Un_CheckAll" value="0.00" id="none" 
             onclick="unCheck(this, 'pepperoni','sausage', 'mushroom', 'olive'); "/>
      <label for="none">No Toppings (Cheese Pizza)</label> 
    </td>
  </tr>
<table>

Answer 1

Используя jQuery , это становится тривиальным. Проверьте этот образец .