使用复选框切换对 div 求和答案

【问题标题】：Summing divs using checkbox toggle使用复选框切换对 div 求和
【发布时间】：2021-08-05 22:16:46
【问题描述】：

在下面的代码中，我尝试使用复选框显示成本，并在切换复选框时在底行创建相应的总计。这个想法是用户选择与他们相关的项目并计算成本。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta http-equiv="Cache-Control" content="no-store" /> <!--stop checkbox caching in FF-->
    <meta http-equiv="Pragma" content="no-cache">
 
    <title>Pills</title> 

    <link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/grid/">

    

    <!-- Bootstrap core CSS -->
<link href="https://getbootstrap.com/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <!-- Favicons -->
<link rel="apple-touch-icon" href="https://getbootstrap.com/docs/5.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
<link rel="icon" href="https://getbootstrap.com/docs/5.0/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
<link rel="icon" href="https://getbootstrap.com/docs/5.0/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
<link rel="manifest" href="https://getbootstrap.com/docs/5.0/assets/img/favicons/manifest.json">
<link rel="mask-icon" href="https://getbootstrap.com/docs/5.0/assets/img/favicons/safari-pinned-tab.svg" color="#7952b3">
<link rel="icon" href="https://getbootstrap.com/docs/5.0/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#7952b3">


    <style>
      .bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
      }

      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }
      .dT{display: none;}

    
    </style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>





<script type="text/javaScript">
  function t1() {
     var e1 = document.getElementById('t1'); e1.innerText = e1.innerText === '$0' ? '$3000' : '$0'; 
     document.getElementById('t1-total').innerText = e1.innerText; 
     
    } //Tuition
  
    function t2() {
    var  e2 = document.getElementById('t2'); e2.innerHTML = e2.innerHTML === '$0' ? '$120' : '$0';
     document.getElementById('t2-total').innerText = e2.innerText } //Activity Fee
    
 </script>





    
    <!-- Custom styles for this template -->
    <link href="https://getbootstrap.com/docs/5.0/examples/grid/grid.css" rel="stylesheet">
  </head>
  <body class="py-4">
    
          <main>
            <div class="container">
                

                      <!--Tuition-->
                          <div class="row mb-3 themed-grid-col"><h2>Tuition </h2></div>
                          <div class="row mb-3">
                            <div class="col-md-4 themed-grid-col"><label><input type="checkbox" autocomplete="off"  onclick="t1()"> Tuition</label></div>
                            <div class="col-md-4 themed-grid-col"><div id="t1">$0</div></div>
                            <div class="col-md-4 themed-grid-col"><div id="t1-total">$0</div></div> 
                          </div>
                      <!--Activity-->
                      
                        <div class="row mb-3">
                          <div class="col-md-4 themed-grid-col"><label><input type="checkbox"autocomplete="off" onclick="t2()"> Activity Fee (if charged for that program)</label></div>
                          <div class="col-md-4 themed-grid-col"><div id="t2">$0</div></div>
                          <div class="col-md-4 themed-grid-col"><div id="t2-total">$0</div></div> 
                        </div>
                      <!--Program Fee-->
                      <div class="row mb-3">
                        <div class="col-md-4 themed-grid-col"><label>Total</label></div>
                        <div class="col-md-4 themed-grid-col"><div id="t3-total1">I'd like this to sum to $3,120 when both checkboxes are checked and $0 when unchecked</div></div>
                        <div class="col-md-4 themed-grid-col"><div id="t3-total2">I'd like this to sum to $3,120 when both checkboxes are checked and $0 when unchecked</div></div> 
                      </div>
                     
                    <!--CLOSE TUITION PANE #53498-->

            
                 
                  
            </div> <!-- close container -->
          
          </main>

          
  </body>
</html>

..进入 div

<div class="col-md-4 themed-grid-col"><div id="t3-total1">I'd like this to sum to $3,120 when both checkboxes are checked and $0 when unchecked</div></div>
<div class="col-md-4 themed-grid-col"><div id="t3-total2">I'd like this to sum to $3,120 when both checkboxes are checked and $0 when unchecked</div></div>

希望我以正确的方式解决这个问题。非常感谢任何帮助。

【问题讨论】：

标签： javascript html

【解决方案1】：

<script type="text/javaScript">
  let tuition = 0
  let activity = 0

  function t1() {
    tuition = tuition === 0 ? 3000 : 0

    document.getElementById('t1').innerText = '$' + tuition
    document.getElementById('t1-total').innerText = '$' + tuition
    document.getElementById('t3-total1').innerText = '$' + (tuition === 0 || activity === 0 ? 0 : (tuition + activity))
  }

  function t2() {
    activity = activity === 0 ? 120 : 0

    document.getElementById('t2').innerText = '$' + tuition
    document.getElementById('t2-total').innerText = '$' + tuition
    document.getElementById('t3-total2').innerText = '$' + (tuition === 0 || activity === 0 ? 0 : (tuition + activity))
  }
</script>

【讨论】：

非常接近。不确定代码是否缺少一些单引号？ t2 函数有最多的问题。谢谢
编程不应该是在文件中复制/粘贴代码。
注意！我将采纳该建议并努力改进

【解决方案2】：

这修复了它：

<script type="text/javaScript">
  let tuition = 0;
  let activity = 0;

  function t1() {
    tuition = tuition === 0 ? 3000 : 0;

    document.getElementById('t1').innerText = '$' + tuition;
    document.getElementById('t1-total').innerText = '$' + tuition;
    document.getElementById('t3-total1').innerText = '$' + (tuition + activity);
    document.getElementById('t3-total2').innerText = '$' + (tuition + activity);
    // alert("tuition t1 "+tuition);
    // alert("activity t1 "+activity);
  }

  function t2() {
    activity = activity === 0 ? 120 : 0;

    document.getElementById('t2').innerText = '$' + activity;
    document.getElementById('t2-total').innerText = '$' + activity;
    document.getElementById('t3-total1').innerText = '$' + (tuition + activity);
    document.getElementById('t3-total2').innerText = '$' + (tuition + activity);
    // alert("tuition t2 "+tuition);
    // alert("activity t2 "+activity);
  }
</script>

...感谢您为我指明了正确的方向。如果我可以改进代码，请告诉我。谢谢

【讨论】：