添加复选框以计算价格

时间：2018-02-23 19:42:14

标签： javascript jquery html css

目前，我的价格输出是根据所选输入字段的数量计算的。我一直试图在此计算中添加一个复选框，如果选中，则会在总价格上增加5美元。话虽如此，我还不是很成功。根据我的理解，有两种计算方法：

  1. 我点击了增加/减少按钮，它会检查是否已选中该复选框

  2. 我选中复选框并计算总价

    3. 这是我到目前为止的代码：

      function IncludePrice()
{
    var IncludePrice=0;
    var include = theForm.elements["include"];
    if(include.checked==true)
    {
        IncludePrice=5;
    }
    return IncludePrice;
}





$(".incr-btn_mobile").on("click", function(e) {
      var $button = $(this);
      var oldValue = $button.parent().find('.quantity').val();
      $button.parent().find('.incr-btn_mobile[data-action="decrease"]').removeClass('inactive');
      if ($button.data('action') == "increase") {
        var newVal = parseFloat(oldValue) + 1;
      } else {
        // Don't allow decrementing below 1
        if (oldValue > 1) {
          var newVal = parseFloat(oldValue) - 1;
        } else {
          newVal = 1;
          $button.addClass('inactive');
        }
      }
      $button.parent().find('.quantity').val(newVal);

      var cakePrice = newVal;
      var includep = IncludePrice();
      var divobj = document.getElementById($button.attr('data-target'));
      divobj.style.display = 'block';
      divobj.innerHTML = "=  $" + (cakePrice) * 7.99 + (includep);
      e.preventDefault();
    });
    
    .bg {
 width: 100%;
}


.column {
    float: left;
    width: 50%;
    padding: 10px;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
    
}



.count-input_mobile {
  position: relative;
  max-width: 1000%;
  max-width: 400px;
  margin-top: 10px;
  text-align: center;
}
.count-input_mobile input {
  width: 100%;
  height: 42px;
  border: 1px solid #000
  border-radius: 2px;
  background: none;
  text-align: center;
}
.count-input_mobile input:focus {
  outline: none;
}
.count-input_mobile .incr-btn_mobile {
  display: block;
  position: absolute;
  width: 30px;
  height: 30px;
  font-size: 26px;
  font-weight: 300;
  text-align: center;
  line-height: 30px;
  top: 50%;
  right: 0;
  margin-top: -15px;
  text-decoration:none;
}
.count-input_mobile .incr-btn_mobile:first-child {
  right: auto;
  left: 0;
  top: 46%;
}
.count-input_mobile.count-input-sm {
  max-width: 125px;
}
.count-input_mobile.count-input-sm input {
  height: 36px;
}
.count-input_mobile.count-input-lg {
  max-width: 200px;
}
.count-input_mobile.count-input-lg input {
  height: 70px;
  border-radius: 3px;
}

.button_mobile {
    border: 1px solid #000;
    border-radius: 2px;
    background: none;
    padding: 10.5px;
    width:100%;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
    margin-top:10px;
}

.sum_output {
    background: none;
    padding: 9.5px;
    width:100%;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
    margin-top:10px;
}

.accordion_img {
  width:200%;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div class="count-input_mobile space-bottom">
<a class="incr-btn_mobile" data-action="decrease" data-target="cleanse_drop_1" href="#">–</a>
<input class="quantity" id="ShowButton_value_1" type="text" name="quantity" value="1"/>
<a class="incr-btn_mobile" data-action="increase" data-target="cleanse_drop_1" href="#">+</a>
</div>      
<label for='include' class="inlinelabel">Include Extra? ($5)</label>
               <input type="checkbox" id="include" name='include' data-target="cleanse_drop_1" />
<div id="cleanse_drop_1" class="sum_output">=&nbsp;&nbsp;$7.99</div>

      
        

    更新：

      

    我根据这里的反馈进行了一些更改，但这似乎打破了增加/减少字段。这是代码：

    $(".incr-btn_mobile").on("click", function(e) {
      var $button = $(this);
      var oldValue = $button.parent().find('.quantity').val();
      $button.parent().find('.incr-btn_mobile[data-action="decrease"]').removeClass('inactive');
      if ($button.data('action') == "increase") {
        var newVal = parseFloat(oldValue) + 1;
      } else {
        // Don't allow decrementing below 1
        if (oldValue > 1) {
          var newVal = parseFloat(oldValue) - 1;
        } else {
          newVal = 1;
          $button.addClass('inactive');
        }
      }
      $button.parent().find('.quantity').val(newVal);

      var cakePrice = newVal;
      var includep = theForm.elements.include.checked * 5;
      var divobj = document.getElementById($button.attr('data-target'));
      divobj.style.display = 'block';
      divobj.innerHTML = "=&nbsp;&nbsp;$" + (cakePrice) * 7.99 + (includep);
      e.preventDefault();
    });
    
    .bg {
 width: 100%;
}


.column {
    float: left;
    width: 50%;
    padding: 10px;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
    
}



.count-input_mobile {
  position: relative;
  max-width: 1000%;
  max-width: 400px;
  margin-top: 10px;
  text-align: center;
}
.count-input_mobile input {
  width: 100%;
  height: 42px;
  border: 1px solid #000
  border-radius: 2px;
  background: none;
  text-align: center;
}
.count-input_mobile input:focus {
  outline: none;
}
.count-input_mobile .incr-btn_mobile {
  display: block;
  position: absolute;
  width: 30px;
  height: 30px;
  font-size: 26px;
  font-weight: 300;
  text-align: center;
  line-height: 30px;
  top: 50%;
  right: 0;
  margin-top: -15px;
  text-decoration:none;
}
.count-input_mobile .incr-btn_mobile:first-child {
  right: auto;
  left: 0;
  top: 46%;
}
.count-input_mobile.count-input-sm {
  max-width: 125px;
}
.count-input_mobile.count-input-sm input {
  height: 36px;
}
.count-input_mobile.count-input-lg {
  max-width: 200px;
}
.count-input_mobile.count-input-lg input {
  height: 70px;
  border-radius: 3px;
}

.button_mobile {
    border: 1px solid #000;
    border-radius: 2px;
    background: none;
    padding: 10.5px;
    width:100%;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
    margin-top:10px;
}

.sum_output {
    background: none;
    padding: 9.5px;
    width:100%;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
    margin-top:10px;
}

.accordion_img {
  width:200%;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div class="count-input_mobile space-bottom">
<a class="incr-btn_mobile" data-action="decrease" data-target="cleanse_drop_1" href="#">–</a>
<input class="quantity" id="ShowButton_value_1" type="text" name="quantity" value="1"/>
<a class="incr-btn_mobile" data-action="increase" data-target="cleanse_drop_1" href="#">+</a>
</div>      
<label for='include' class="inlinelabel">Include Extra? ($5)</label>
               <input type="checkbox" id="include" name='include' data-target="cleanse_drop_1" />
<div id="cleanse_drop_1" class="sum_output">=&nbsp;&nbsp;$7.99</div>

1 个答案:

答案 0 :(得分：1)

你去找我的朋友。我只更改你的js代码。我做了所有改变：

  • 删除了IncludePrice功能，因为您只能在一行中执行此功能。并且永远不要为变量使用函数名。它可能会破坏您的代码。
  • 所有切换为jQuery使用而不是半jQuery和原生JS。
  • 为复选框onclick创建了一个功能，以动态更改王子。
  • 我更改了变量的名称，使其更具体。
  • 添加了一些注释以使代码更清晰。

＆＃13;
＆＃13; 
var _EXTRAVAL = 5;

$(".incr-btn_mobile").on("click", function(e) {
    // Prevent default action
    e.preventDefault();

    // Set variable for the method
    var button = $(this);
    var labelNb = button.parent().find('.quantity');
    var labelPrice = $("#" + button.attr('data-target'));
    var currentNb = button.parent().find('.quantity').val();
    var newNb = 0;

    // Remove 'inactive' class
    $('.incr-btn_mobile[data-action="decrease"]').removeClass('inactive');

    // Increase or decrease
    if (button.attr('data-action') == "increase") {
        newNb = parseFloat(currentNb) + 1;
    } else {

        // Don't allow decrementing below 1
        if (currentNb > 1) {
            newNb = parseFloat(currentNb) - 1;
        } else {
            newNb = 1;
            button.addClass('inactive');
        }
    }


    var isExtra = $("#include").prop('checked') ? _EXTRAVAL : 0;
    $(labelNb).val(newNb);
    $(labelPrice).css('display', 'block').html("=  $" + String((((newNb) * 7.99) + (isExtra)).toFixed(2)));
});

$("#include").on('click', function(){
    // Set variable for method
    var checkbox = $(this);
    var labelPrice = $("#" + $(".incr-btn_mobile").attr('data-target'));
    var labelPriceFloat = parseFloat(labelPrice.html().substring(4));
    
    // If checkbox is check, increse price
    if (checkbox.prop('checked')) {
        labelPrice.html("=  $" + String((labelPriceFloat + _EXTRAVAL).toFixed(2)));
    } else {
        labelPrice.html("=  $" + String((labelPriceFloat - _EXTRAVAL).toFixed(2)));
    }
});
＆＃13; 
.bg {
 width: 100%;
}


.column {
    float: left;
    width: 50%;
    padding: 10px;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
    
}



.count-input_mobile {
  position: relative;
  max-width: 1000%;
  max-width: 400px;
  margin-top: 10px;
  text-align: center;
}
.count-input_mobile input {
  width: 100%;
  height: 42px;
  border: 1px solid #000
  border-radius: 2px;
  background: none;
  text-align: center;
}
.count-input_mobile input:focus {
  outline: none;
}
.count-input_mobile .incr-btn_mobile {
  display: block;
  position: absolute;
  width: 30px;
  height: 30px;
  font-size: 26px;
  font-weight: 300;
  text-align: center;
  line-height: 30px;
  top: 50%;
  right: 0;
  margin-top: -15px;
  text-decoration:none;
}
.count-input_mobile .incr-btn_mobile:first-child {
  right: auto;
  left: 0;
  top: 46%;
}
.count-input_mobile.count-input-sm {
  max-width: 125px;
}
.count-input_mobile.count-input-sm input {
  height: 36px;
}
.count-input_mobile.count-input-lg {
  max-width: 200px;
}
.count-input_mobile.count-input-lg input {
  height: 70px;
  border-radius: 3px;
}

.button_mobile {
    border: 1px solid #000;
    border-radius: 2px;
    background: none;
    padding: 10.5px;
    width:100%;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
    margin-top:10px;
}

.sum_output {
    background: none;
    padding: 9.5px;
    width:100%;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
    margin-top:10px;
}

.accordion_img {
  width:200%;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div class="count-input_mobile space-bottom">
  <a class="incr-btn_mobile" data-action="decrease" data-target="cleanse_drop_1" href="#">–</a>
  <input class="quantity" id="ShowButton_value_1" type="text" name="quantity" value="1"/>
  <a class="incr-btn_mobile" data-action="increase" data-target="cleanse_drop_1" href="#">+</a>
</div>      
<label for='include' class="inlinelabel">Include Extra? ($5)</label>
<input type="checkbox" id="include" name='include' data-target="cleanse_drop_1" />
<div id="cleanse_drop_1" class="sum_output">=  $7.99</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题