时间戳

首页 > 解决方案 > 如何使输出对函数做出反应？

jquery - 如何使输出对函数做出反应？

问题描述

我有一个总价值输出。当未选中复选框时，我需要它减少。它有效，但不适用于我取消选中该框的功能。

Jquery总值输出：

$(document).ready(function() {
  var begin = 720;
  $("#yett").val('Total €' + begin.toFixed(2).replace(/\./g, ','));
  $("#CalculatorPlacing").on("change", function() {
    var prev = $("#yett").val().split('€')[1];
    if ($(this).prop('checked') == true) {
      total = begin - 300;
      $("#yett").val('Total €' + total.toFixed(2).replace(/\./g, ','));
    }else{
      $("#yett").val('Total €' + begin.toFixed(2).replace(/\./g, ','));
    }
  });
});

Jquery取消选中该框：

$('#CalculatorTransport').change(function() {
  if ($('#CalculatorTransport').is(':checked') == true) { // off
    $("#CalculatorPlacing").attr("disabled", true);
    $('#CalculatorPlacing').prop('checked', true);
  }
});

价值输出：

<div class="SummaryRow">
  <h1><input type="yeets" name="_mdjm_event_cost" id="yett" class="mdjm-input-currency required" readonly="readonly" value="" placeholder="Totaal €0.00" style="
        height: 100px;
        width: 275px;
        margin-top: -40px;
        color: black;
        font-weight: bold;" />
  </h1>
</div>

两个复选框：

<div class="switch" onclick="TotaalOfferte()">
   <input type="checkbox" name="iCalculatorTransport" id="CalculatorTransport" class="cmn-toggle cmn-toggle-round AutosubmitCalculator" value="0" tabindex="4">
   <label for="CalculatorTransport" data-on="JA" data-off="NEE"></label>
</div>


<div class="switch">
  <input type="checkbox" name="iCalculatorPlacing" id="CalculatorPlacing" class="cmn-toggle cmn-toggle-round AutosubmitCalculator" value="1" tabindex="5">
  <label for="CalculatorPlacing" data-on="JA" data-off="NEE"></label>
</div>

当我取消选中“CalculatorTransport”复选框时，它也会取消选中“CalculatorPlacing”复选框，但我的总值函数不会对其做出反应。有谁知道为什么会这样？

标签： jqueryhtml

解决方案

如果我理解这个问题是正确的，你可以做类似的事情。有关更多详细信息，请参阅片段中的评论

$(document).ready(function() {
  var total = $('#yett').text();  
  $(".switch").on('change', function(event){
  
      // remove $  
      total = total.substring(0, total.length-1);   
      
      //check if clicked checkbox is checked
      if($(this).is(":checked")){       
       //subtract clicked input by the "subtractby" value (from the HTML)
        total = ~~total - ~~($(this).attr('subtractby'));   
      }
      else{      
      //add to the clicked input by the "subtractby" value (from the HTML)         
        total = ~~total + ~~($(this).attr('subtractby'));   
      }                 
      
      //add back the $
      total = total + "$"; 
      
      //update the text
      $('#yett').text(total);      
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="SummaryRow">
  <h1 id="yett">1000$</h1>
</div>


<div>
  <label>-187</label>
  <input class="switch" type="checkbox" subtractby="187">
</div>

<div>
  <label>-27</label>
  <input class="switch" type="checkbox" subtractby="27">
</div>

推荐阅读