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

我正在做一个JavaScript和HTML项目，客户可以点击一个复选框来选择他们想做的服务，它会在右边为每个服务加上成本

我目前正在为每个项目使用复选框，并需要它们像单选按钮一样工作。在我提供的屏幕截图中，客户不能同时在车上安装CQuartz Finest套装和陶瓷Pro Gold套装

我可以让复选框“取消选中”后，它意识到另一个是目前选中的，但它不会从总减去它自己

如果你能把我引向正确的方向，那就太棒了！我通常在HTML5、CSS3、java和C++中编码。我还没有在JavaScript方面做很多工作

我在这里发布了截图：

下面是我当前使用的代码：

HTML

陶瓷专业金
$1695.00
CQuartz Finest
$700.00

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>

var totalPrice=0.00；
var ceramicProGold=1695.00；
var cquartzFinest=700.00；
函数validateCeramicProGold（）{
var elcertical=document.getElementById（'ceramicProGoldOption'）；
var elCQuartzFinest=document.getElementById（'cquartzFinestOption'）；
var chkbox陶瓷=document.getElementById（'ceramicProGoldBox'）；
var chkboxCquartzFinest=document.getElementById（'ceramicProGoldBox'）；
if（chkbox.checked==false&&chkboxCquartzFinest.checked==false）
{
totalPrice=totalPrice+ceramicProGold；
document.getElementById（'options'）.innerHTML+=“
陶瓷专业黄金版
”；
updatePrice（）；
}
else if（document.getElementById（'ceramicProGoldBox'）。选中==false）
{
totalPrice=totalPrice-ceramicProGold；
updatePrice（）；
document.getElementById（“ceramicProGoldOption”）.remove（）；
}
if（chkboxCquartzFinest.checked==true）
{
//chkboxCQuartzFinest.attr（'checked'，false）；
警报（“CQuartz已检查”）；
}
else{}
}
函数validateCquartzFinest（）{
var elcertical=document.getElementById（'ceramicProGoldOption'）；
var elCQuartzFinest=document.getElementById（'cquartzFinestOption'）；
var chkbox陶瓷=document.getElementById（'ceramicProGoldBox'）；
var chkboxCquartzFinest=document.getElementById（'ceramicProGoldBox'）；
if（chkbox.checked==false）
{
totalPrice=totalPrice+Cquartz；
document.getElementById（'options'）.innerHTML+=“
CQuartz finestoption
”；
updatePrice（）；
}
else if（chkboxCquartzFinest.checked==false）
{
totalPrice=totalPrice-Cquartz；
updatePrice（）；
document.getElementById（“cquartzFinestOption”）.remove（）；
}
if（chkbox.checked==true）
{
//警报（“已检查陶瓷专业版”）；
chkbox.attr（'checked'，false）；
}
else{}
}
函数updatePrice（）
{
document.getElementById（“totalPrice”）.innerHTML=totalPrice.toFixed（2）；
}
$（“#ceramicProGoldBox”）。更改（validateCeramicProGold）；
$（“#cquartzFinestBox”）.change（validatecquartzfinests）；
//$（“.paintcoatics”）.change（函数（）{$（.paintcoatics”）.prop（'checked'，false）；$（this.prop（'checked'，true）；}）；
//页面中的每个复选框
/*$（“#输入：复选框”）。单击（函数（）{
$（“#输入：复选框”）.not（this）.prop（'checked'，false）；
});*/                   

既然您已经使用了JQuery，那么您自己就可以更轻松地使用它。使用数据属性将相关组信息添加到复选框中，并对与特定选择匹配的所有复选框使用一个更改事件（在本例中，我选中了所有具有

paintcoatics

类的复选框）

当复选框发生更改时，事件将取消选中此组以前选中的所有复选框，并将比较内部状态以更新totalprice（和潜在选项）

我在代码中添加了一些注释，以明确发生了什么

“严格使用”；
var totalPrice=0；
函数更新价格（总价）{
$（'#totalPrice'）.html（'$'+totalPrice.toFixed（2））；
}
功能添加选项（checkboxItem）{
var s=$（checkboxItem）.data（'group'）；
$（'#options'）.append（'
'+$（checkboxItem）.data（'option'）+'
'）；
}
功能移除选项（复选框项）{
var s=$（checkboxItem）.data（'group'）；
$（'#'+s）.remove（）；
}
函数addPrice（checkboxItem）{
totalPrice+=parseInt（$（checkboxItem）.data（'price'）；
}
功能移除价格（checkboxItem）{
totalPrice-=parseInt（$（checkboxItem）.data（'price'）；
}
var lastChecked={}；
$（'input.paintCoatics'）。on（'change'，函数（eventSource）{
//目标指向已单击的复选框
var sender=eventSource.target；
如果（发送方）{
//我们在数据组中有相关的数据组
变量组=$（发送方）.data（'group'）；
//选中此组的所有匹配复选框
$（“[data group=”“+group+”]”）。每个（函数（索引，复选框）{
如果（复选框！==发件人）{
//如果它们与此发件人不同，则取消选择它们
checkbox.checked=false；
}
});
<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>