1つのチェックボックスをラジオのように動作させる

Question

私はこのピザオーダーフォームを持っています。トッピングセクションでは、複数の選択肢をチェックすることができます。例えば、ユーザーは、ペパロニ、ソーセージ、オリーブなどをチェックすることができます。しかし、ユーザーが「No Toppings」を選択した場合は、残りのチェックボックスをクリアします。私はそれを行うためにいくつかのJavaScriptを書こうとしましたが、それは不安定で、onClickにしか作用しませんでした。だから基本的には、ユーザーが「No Toppings」を選択できないようにしたい、他に何も選択しないようにしたい。ユーザーが別のトッピングを選択したとき、「No Toppings」を選択したくない。私はこれが理にかなってほしい！どんな助けもありがとう！ jQueryを利用

<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

が、これは些細な次のようになります。ここでは、これまでに私のコードです。 Check out this sample。