mardi 16 février 2016

JavaScript - Checkbox acting like Radio Buttons

I am making a JavaScript and HTML project where customers can click a check box for the services they would like done and it will add up the cost for each service on the right hand side.

I am currently using check boxes for each item and need them to act like radio buttons. In the screenshot I included customers cannot have the CQuartz Finest package and the Ceramic Pro Gold Package on their car at the same time.

I can get the check boxes to "uncheck" after it realizes the other one is currently checked but it will not subtract it's self from the total.

If you could steer me in the right direction that would be awesome! I typically code in HTML5, CSS3, Java and C++. I have not done a whole lot in JavaScript yet.

I have the screenshot posted here: http://ift.tt/1SvT62v

Here is the code that I am currently using below:

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>




Aucun commentaire:

Enregistrer un commentaire