选中复选框时，价格不会转换

时间：2017-05-04 05:37:43

标签： javascript php jquery

这是我的代码我想要在选中或取消选中复选框时更改价格，当我选中另一个复选框时，所有复选框都将删除，但不会删除复选框价格，其删除复选框但不会删除价钱。意味着它应该再次设置为零。请帮帮我。

<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);
            });

        });

2 个答案:

答案 0 :(得分：1)

干燥你的代码，选择相对于你点击的输入的元素，现在你取消选中之前检查的输入，这样你就不需要这个功能了，因为你没有一个总和，你只选中了一个复选框

$(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>

如果您想要多个选定的选项，请执行以下操作：

$(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>

答案 1 :(得分：0)

如前所述，Fiddle

不需要changePrice函数 

    $('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>

相关问题
最新问题