当复选框被选中时，价格不转换

Question

this is my code i want to change price when check box is checked or unchecked, when i checked another checkbox then all checkbox is going remove but doesn't remove checkbox price its removing checkbox but doesn't remove price. means its should be set to zero again. help me please.

<div class="price" id="amount">₹0</div>

<div class="check">
<label id="somede-div" class="first2" for="check-2"><input id="check-2" 
class="first" name="save2" type="checkbox" /><span class="checkbox">
</span>₹749<span id="somede-element">IBPS PO 2017 Mocks (20 Prelims + 10 
Mains)</span></label>
<label id="some-div" class="first0" for="check-0"><input id="check-0" 
class="first" name="save" type="checkbox" /><span class="checkbox">
</span>₹1999<span id="some-element">IBPS PO 2017 Online Coaching 
Course</span></label>
<label id="somed-div" class="first1" for="check-1"><input id="check-1" 
 class="first" name="save1" type="checkbox" /><span class="checkbox">
</span>₹2999<span id="somed-element">IBPS PO 2017 Online Coaching Course + 
30 Mock Tests</span></label>
<label id="somedef-div" class="first3" for="check-3"><input id="check-3" 
class="first" name="save3" type="checkbox" /><span class="checkbox">
</span>₹3499<span id="somedef-element" style="right: 9px;">IBPS PO 2017 
Online and Pendrive</span></label>
<label id="somedeff-div" class="first4" for="check-4"><input id="check-4" 
class="first" name="save4" type="checkbox" /><span class="checkbox">
</span>₹3999<span id="somedeff-element" style="right: 9px;">IBPS PO 2017 
Online and Pendrive + 30 Mock Tests</span></label>
<div class="mask"></div>
<div class="helping">Please select any one box</div>

$(document).ready(function() {

        var changePrice = function changePrice(amt, state) {
            var curPrice = $('.price').text();
            curPrice = curPrice.substring(1, curPrice.length);
            if (state == true) {
                curPrice = parseInt(curPrice) + parseInt(amt);
            } else {
                curPrice = parseInt(curPrice) - parseInt(amt);
            }
            //alert(curPrice);
            window.curAmount = curPrice;
            curPrice = '₹' + curPrice;
            $('.price').text(curPrice);

            //alert(curAmount);

        }

        $(function() {
            $('#check-0').on('change', function() {
                $(".helping").css("display", "none");
                var itemPrice = $('label[for="check-0"]').text();
                itemPrice = itemPrice.substring(1, itemPrice.length);
                changePrice(itemPrice, $('#check-1').is(':checked'));
                $(".first").attr("checked", false); //uncheck all checkboxes
                $(this).attr("checked", true);
                /* if ($('#check-0').filter(':checked').length >= 1) {
             changePrice(parseInt(curAmount) + parseInt(itemPrice));
    $('input.first').not(this).prop('checked', false);
           }*/
                //changePrice(parseInt(itemPrice) * parseInt(curAmount));

            });
            $('#check-1').on('change', function() {
                $(".helping").css("display", "none");
                var itemPrice = $('label[for="check-1"]').text();
                itemPrice = itemPrice.substring(1, itemPrice.length);
                changePrice(itemPrice, $('#check-1').is(':checked'));
                $(".first").attr("checked", false); //uncheck all checkboxes
                $(this).attr("checked", true);
                //alert(itemPrice);
            });
            $('#check-2').on('change', function() {
                $(".helping").css("display", "none");
                var itemPrice = $('label[for="check-2"]').text();
                itemPrice = itemPrice.substring(1, itemPrice.length);
                changePrice(itemPrice, $('#check-2').is(':checked'));
                $(".first").attr("checked", false); //uncheck all checkboxes
                $(this).attr("checked", true);
                //alert(itemPrice);
            });
            $('#check-3').on('change', function() {
                $(".helping").css("display", "none");
                var itemPrice = $('label[for="check-3"]').text();
                itemPrice = itemPrice.substring(1, itemPrice.length);
                changePrice(itemPrice, $('#check-3').is(':checked'));
                $(".first").attr("checked", false); //uncheck all checkboxes
                $(this).attr("checked", true);
                //alert(itemPrice);
            });

            $('#check-4').on('change', function() {
                $(".helping").css("display", "none");
                var itemPrice = $('label[for="check-4"]').text();
                itemPrice = itemPrice.substring(1, itemPrice.length);
                changePrice(itemPrice, $('#check-4').is(':checked'));
                $(".first").attr("checked", false); //uncheck all checkboxes
                $(this).attr("checked", true);
                //alert(itemPrice);
            });

        });

Answer 1

Dry your code, select the elements relative to your clicked input,right now you are unchecking the previous checked input so you don't need the function because you don't have a sum you have a single checkbox checked

 $(document).ready(function() { $('.first').on('change', function() { $(".helping").css("display", "none"); var itemPrice = $(this).parent().clone().find('*').remove().end().text(); //this will remove all the spans from your label and allow you to get the price $('.price').text($(this).is(':checked') ? itemPrice : '₹0'); $(".first").not(this).prop("checked", false); //uncheck all checkboxes }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="price" id="amount">₹0</div> <div class="check"> <label id="somede-div" class="first2" for="check-2"> <input id="check-2" class="first" name="save2" type="checkbox" /> <span class="checkbox"></span>₹749 <span id="somede-element"> IBPS PO 2017 Mocks (20 Prelims + 10 Mains)</span> </label> <label id="some-div" class="first0" for="check-0"> <input id="check-0" class="first" name="save" type="checkbox" /><span class="checkbox"> </span>₹1999<span id="some-element">IBPS PO 2017 Online Coaching Course</span></label> <label id="somed-div" class="first1" for="check-1"><input id="check-1" class="first" name="save1" type="checkbox" /><span class="checkbox"> </span>₹2999<span id="somed-element">IBPS PO 2017 Online Coaching Course + 30 Mock Tests</span></label> <label id="somedef-div" class="first3" for="check-3"><input id="check-3" class="first" name="save3" type="checkbox" /><span class="checkbox"> </span>₹3499<span id="somedef-element" style="right: 9px;">IBPS PO 2017 Online and Pendrive</span></label> <label id="somedeff-div" class="first4" for="check-4"><input id="check-4" class="first" name="save4" type="checkbox" /><span class="checkbox"> </span>₹3999<span id="somedeff-element" style="right: 9px;">IBPS PO 2017 Online and Pendrive + 30 Mock Tests</span></label> <div class="mask"></div> <div class="helping">Please select any one box</div> </div> 

if you want multiple selected options then do:

 $(document).ready(function() { var changePrice = function changePrice(amt, state) { var curPrice = $('.price').text(); curPrice = curPrice.substring(1, curPrice.length); if (state == true) { curPrice = parseInt(curPrice) + parseInt(amt); } else { curPrice = parseInt(curPrice) - parseInt(amt); } //alert(curPrice); window.curAmount = curPrice; curPrice = '₹' + curPrice; $('.price').text(curPrice); //alert(curAmount); } $('.first').on('change', function() { $(".helping").css("display", "none"); var itemPrice = $(this).parent().clone().find('*').remove().end().text(); //this will remove all the spans from your label and allow you to get the price itemPrice = itemPrice.trim().substring(1, itemPrice.length); changePrice(itemPrice, $(this).is(':checked')); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="price" id="amount">₹0</div> <div class="check"> <label id="somede-div" class="first2" for="check-2"> <input id="check-2" class="first" name="save2" type="checkbox" /> <span class="checkbox"></span>₹749 <span id="somede-element"> IBPS PO 2017 Mocks (20 Prelims + 10 Mains)</span> </label> <label id="some-div" class="first0" for="check-0"> <input id="check-0" class="first" name="save" type="checkbox" /><span class="checkbox"> </span>₹1999<span id="some-element">IBPS PO 2017 Online Coaching Course</span></label> <label id="somed-div" class="first1" for="check-1"><input id="check-1" class="first" name="save1" type="checkbox" /><span class="checkbox"> </span>₹2999<span id="somed-element">IBPS PO 2017 Online Coaching Course + 30 Mock Tests</span></label> <label id="somedef-div" class="first3" for="check-3"><input id="check-3" class="first" name="save3" type="checkbox" /><span class="checkbox"> </span>₹3499<span id="somedef-element" style="right: 9px;">IBPS PO 2017 Online and Pendrive</span></label> <label id="somedeff-div" class="first4" for="check-4"><input id="check-4" class="first" name="save4" type="checkbox" /><span class="checkbox"> </span>₹3999<span id="somedeff-element" style="right: 9px;">IBPS PO 2017 Online and Pendrive + 30 Mock Tests</span></label> <div class="mask"></div> <div class="helping">Please select any one box</div> </div> 

Answer 2

As suggested earlier you don't need changePrice function for that Fiddle

  $('input[type="checkbox"]').on('change', function(){ $(".helping").css("display", "none"); var itemPrice = $(this).parent().clone().children().remove().end().text().trim(); $('.price').text($(this).is(':checked') ? '₹'+itemPrice.substring(1, itemPrice.length) : '₹0'); $(".first").not(this).prop("checked", false); //uncheck all checkboxes }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="price" id="amount">₹0</div> <div class="check"> <label id="somede-div" class="first2" for="check-2"><input id="check-2" class="first" name="save2" type="checkbox" /><span class="checkbox"> </span>₹749<span id="somede-element">IBPS PO 2017 Mocks (20 Prelims + 10 Mains)</span></label><br/> <label id="some-div" class="first0" for="check-0"> <input id="check-0" class="first" name="save" type="checkbox" /> <span class="checkbox"></span> ₹1999 <span id="some-element">IBPS PO 2017 Online Coaching Course</span></label><br/> <label id="somed-div" class="first1" for="check-1"><input id="check-1" class="first" name="save1" type="checkbox" /><span class="checkbox"> </span>₹2999<span id="somed-element">IBPS PO 2017 Online Coaching Course + 30 Mock Tests</span></label><br/> <label id="somedef-div" class="first3" for="check-3"><input id="check-3" class="first" name="save3" type="checkbox" /><span class="checkbox"> </span>₹3499<span id="somedef-element" style="right: 9px;">IBPS PO 2017 Online and Pendrive</span></label><br/> <label id="somedeff-div" class="first4" for="check-4"><input id="check-4" class="first" name="save4" type="checkbox" /><span class="checkbox"> </span>₹3999<span id="somedeff-element" style="right: 9px;">IBPS PO 2017 Online and Pendrive + 30 Mock Tests</span></label><br/> <div class="mask"></div> <div class="helping">Please select any one box</div> </div>