文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
首页
学习
活动
专区
圈层
工具
MCP广场
返回腾讯云官网
社区首页 >问答首页 >选中复选框时，值价格不会换算

问选中复选框时，值价格不会换算
EN

Stack Overflow用户
提问于 2017-05-04 13:37:43
回答 2查看 75关注 0票数 0

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

代码语言：javascript
复制
<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>

​

代码语言：javascript
复制
$(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);
            });

        });
javascript
php
jquery
EN

回答 2

Stack Overflow用户

发布于 2017-05-04 13:51:37

干燥您的代码，选择与您的单击输入相关的元素，现在您正在取消选中之前选中的输入，因此您不需要该函数，因为您没有选中任何一个复选框

​

代码语言：javascript
复制
$(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


  });



});
代码语言：javascript
复制
<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>

​

如果您希望选择多个选项，请执行以下操作：

​

代码语言：javascript
复制
$(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'));

  });



});
代码语言：javascript
复制
<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
EN

Stack Overflow用户

发布于 2017-05-04 14:28:36

正如前面所建议的，该Fiddle不需要changePrice函数

​

代码语言：javascript
复制
    $('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
    });
代码语言：javascript
复制
<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>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/43774642

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档