JavaScript - 复选框的作用类似于单选按钮

我正在制作一个JavaScript和HTML项目，客户可以单击他们想要完成的服务的复选框，它将增加右侧每个服务的成本。

我目前正在为每个项目使用复选框，需要它们像单选按钮一样。在屏幕截图中，我包括的客户不能同时在他们的汽车上安装CQuartz Fineme封装和Ceramic Pro Gold包装。

我可以在意识到当前选中另一个复选框后让复选框"取消选中"，但它不会从总数中减去它自己。

如果你能引导我朝着正确的方向前进，那就太棒了！我通常用HTML5，CSS3，Java和C++编写代码。我还没有在JavaScript中做很多事情。

我在这里发布了屏幕截图：https://www.dropbox.com/s/xlkh4vp70sa39wb/what-we-recommend.jpg?dl=0

这是我目前在下面使用的代码：

.HTML

<div id="gold-package"  class = "one-half-box">
                        <div class="option-parent"><input id ="ceramicProGoldBox" type="checkbox" name="vehicle" onclick="validateCeramicProGold()" class="paintCoatings"><h2>Ceramic Pro Gold</h2><p style="">$1695.00</p></div>
                        <div class="option-child"><a id="ceramic-pro-rain" title="Ceramic Pro 9H" data-geo="ceramic-pro-9h" href="#">• 4 layers of 9H Glass Shield on all painted exterior surfaces</a></div>
                        <div class="option-child"><a id="ceramic-pro-rain" title="Ceramic Plastic Coating" data-geo="plastic-coating" href="#">• 1 layer of 9H Glass Shield on exterior plastics</a></div>
                        <div class="option-child"><a id="ceramic-pro-rain" title="Ceramic Pro Wheel &amp; Tire" data-geo="wheel-coating" href="#">• 1 layer of Ceramic Pro Wheel and Caliper Coating on wheels and calipers</a></div>
                        <div id="tooltip" class="option-child"><a id="ceramic-pro-rain" title="Ceramic Pro Rain" data-geo="ceramic-pro-rain" href="#" >• 1 layer of Rain on all windows and glass</a></div>
                        <div id="tooltip" class="option-child"><a id="paint-correction" title="Paint Correction" data-geo="paint-correction" description="Test Description" href="#" >• Includes 2 stages of Paint Correction</a></div>
                    </div>
                    <div class="one-half-box-space"></div>
                    <div id="cquartz-finest" class = "one-half-box">
                        <div class="option-parent"><input id ="cquartzFinestBox" type="checkbox" name="vehicle" onclick="validateCquartzFinest()" class="paintCoatings"><h2>CQuartz Finest</h2><p style="">$700.00</p></div>
                        <div class="option-child"><a id="ceramic-pro-rain" title="Ceramic Pro 9H" data-geo="cquartz-finest-paint" href="#">• 2 Layers of CQuartz Finest on all painted exterior surfaces</a></div>
                        <div class="option-child"><a id="ceramic-pro-rain" title="Ceramic Pro 9H" data-geo="cquartz-finest-plastic" href="#">• 2 Layers of CQuartz Finest on exterior plastics</a></div>
                        <div class="option-child"><a id="ceramic-pro-rain" title="Ceramic Pro 9H" data-geo="wheel-coating" href="#">• 2 Layers of CQuartz Finest on Wheels &amp; Calipers</a></div>
                        <div class="option-child"><a id="ceramic-pro-rain" title="Ceramic Plastic Coating" data-geo="ceramic-pro-rain" href="#">• 2 Layers of Car Pro Fly By is applied to exterior glass surfaces</a></div>
                        <div class="option-child"><a id="ceramic-pro-rain" title="Ceramic Pro Wheel &amp; Tire" data-geo="light-cut" href="#">• Includes a Single Stage Paint Correction</a></div>
                    </div>

JavaScript

<script type="text/javascript">
    var totalPrice = 0.00;
    var ceramicProGold = 1695.00;
    var cquartzFinest = 700.00;
    function validateCeramicProGold() {
        var elCeramic = document.getElementById('ceramicProGoldOption');
        var elCQuartzFinest = document.getElementById('cquartzFinestOption');
        var chkboxCeramic = document.getElementById('ceramicProGoldBox');
        var chkboxCquartzFinest = document.getElementById('ceramicProGoldBox');
        if (chkboxCeramic.checked == false && chkboxCquartzFinest.checked ==  false) 
        {
          totalPrice = totalPrice + ceramicProGold;
          document.getElementById('options').innerHTML += "<li style='list-style-type: none;padding:0;' id='ceramicProGoldOption'>Ceramic Pro Gold</li>";
          updatePrice();
        }
        else if (document.getElementById('ceramicProGoldBox').checked == false) 
        {
          totalPrice = totalPrice - ceramicProGold;
          updatePrice();
          document.getElementById("ceramicProGoldOption").remove();
        }
        if(chkboxCquartzFinest.checked == true)
        {
            //chkboxCQuartzFinest.attr('checked', false);
            alert("CQuartz is already checked");
        }
        else {}
    }
    function validateCquartzFinest() {
        var elCeramic = document.getElementById('ceramicProGoldOption');
        var elCQuartzFinest = document.getElementById('cquartzFinestOption');
        var chkboxCeramic = document.getElementById('ceramicProGoldBox');
        var chkboxCquartzFinest = document.getElementById('ceramicProGoldBox');
        if (chkboxCeramic.checked == false) 
        {
          totalPrice = totalPrice + cquartzFinest;
          document.getElementById('options').innerHTML += "<li style='list-style-type: none;padding:0;' id='cquartzFinestOption'>CQuartz Finest</li>";
          updatePrice();
        }
        else if (chkboxCquartzFinest.checked == false) 
        {
          totalPrice = totalPrice - cquartzFinest;
          updatePrice();
          document.getElementById("cquartzFinestOption").remove();
        }
        if(chkboxCeramic.checked == true)
        {
            //alert("Ceramic Pro is already checked");
            chkboxCeramic.attr('checked', false);
        }
        else {}
    }
    function updatePrice()
    {
        document.getElementById("totalPrice").innerHTML = totalPrice.toFixed(2);
    }
    $("#ceramicProGoldBox").change(validateCeramicProGold);
    $("#cquartzFinestBox").change(validateCquartzFinest);
    //$(".paintCoatings").change(function(){$(".paintCoatings").prop('checked',false);$(this).prop('checked',true);});
    //Every checkboxes in the page
    /*$('#coatings input:checkbox').click(function() {
        $('#coatings input:checkbox').not(this).prop('checked', false);
    });*/                   
    </script>