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

Question

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

我目前正在为每个项目使用复选框，并需要它们充当单选按钮的作用。在我的屏幕截图中，客户不能同时在他们的车上安装 CQuartz Finest 套件和 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>

Answer 1

由于您已经使用了 JQuery，因此您可以自己使它变得更容易。使用数据属性将相关组信息添加到复选框，并在与特定选择匹配的所有复选框上使用一个更改事件(在本例中，我选取了所有具有 PaintCoatings 类的复选框) )。

当复选框发生更改时，事件将取消选中该组之前选择的所有复选框，并比较内部状态以更新总价(和潜在选项)

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

'use strict';
var totalPrice = 0;

function updatePrice(totalPrice) {
  $('#totalPrice').html('$' + totalPrice.toFixed(2));
}

function addOption(checkboxItem) {
  var s = $(checkboxItem).data('group');
  $('#options').append('<li id="' + s + '">' + $(checkboxItem).data('option') + '</li>');
}

function removeOption(checkboxItem) {
  var s = $(checkboxItem).data('group');
  $('#' + s).remove();
}

function addPrice(checkboxItem) {
  totalPrice += parseInt($(checkboxItem).data('price'));
}

function removePrice(checkboxItem) {
  totalPrice -= parseInt($(checkboxItem).data('price'));
}

var lastChecked = {};
$('input.paintCoatings').on('change', function(eventSource) {
  // target points to the checkbox that got clicked
  var sender = eventSource.target;
  if (sender) {
    // we have the relevant group of data inside data-group
    var group = $(sender).data('group');
    // select all matching checkboxes of this group
    $("[data-group='" + group + "']").each(function(index, checkbox) {
      if (checkbox !== sender) {
        // and deselect them if they are not the same to this sender
        checkbox.checked = false;
      }
    });
    // if this group had a previously selected checkbox
    if (lastChecked[group]) {
      // remove the price from the total price
      removePrice(lastChecked[group]);
      // remove the option from the option list
      removeOption(lastChecked[group]);
      // remove last selected item
      delete lastChecked[group];
    }
    // if the freshly clicked checkbox is checked
    if (sender.checked) {
      // add the price
      addPrice(sender);
      // add the option
      addOption(sender);
      // save it as the currently active one for this group
      lastChecked[group] = sender;
    }
    // update the price
    updatePrice(totalPrice);
  }
});

.option {
  display: inline-block;
  float: left;
  margin: 4px;
  border: solid #a0a0a0 1px;
  width: 150px;
  padding: 5px;
}
.option h2 {
  font-size: 11px;
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="totalPrice">0</div>
<div id="options">
</div>
<div class="option">
  <input id="ceramicProGoldBox" type="checkbox" data-group="paint" data-price="1695" data-option="Ceramic" name="vehicle" class="paintCoatings">
  <label for="cermaicProGoldBox">
    <h2>Ceramic Pro Gold</h2>
  </label>
  <p style="">$1695.00</p>
</div>
<div class="option">
  <input id="cquartzFinestBox" type="checkbox" data-group="paint" data-price="700" data-option="Quartz" name="vehicle" class="paintCoatings">
  <label for="cquartzFinestBox">
    <h2>CQuartz Finest</h2>
  </label>
  <p style="">$700.00</p>
</div>
<div class="option">
  <input id="ceramicProGoldBox" type="checkbox" data-group="wheels" data-price="150" data-option="19 inch wheels" name="vehicle" class="paintCoatings">
  <label for="cermaicProGoldBox">
    <h2>19"</h2>
  </label>
  <p style="">$150.00</p>
</div>
<div class="option">
  <input id="cquartzFinestBox" type="checkbox" data-group="wheels" data-price="100" data-option="18 inch wheels" name="vehicle" class="paintCoatings">
  <label for="cquartzFinestBox">
    <h2>18"</h2>
  </label>
  <p style="">$100.00</p>
</div>