复选框切换和重复 div 值答案

【问题标题】：checkbox toggle and duplicate div value复选框切换和重复 div 值
【发布时间】：2021-10-10 19:17:34
【问题描述】：

我正在使用以下脚本在中间 div #t1 的 2 个设置值 $0 和 $53,498 之间切换。

<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"></div></div> 
                          </div>

function myFunction() {
  const element = document.getElementById('demo')

  element.innerHTML = element.innerHTML === '$0' ? '$53,498' : '$0'
}

当我在 $0 和 $53,498 两个值之间切换时，如何将切换后的值应用到最后一个 div #t1-total。根据 screenshotscreenshot，我希望 div 3 中的值等于 div 2 中的值，因为我切换了 div 1 中的复选框。

我似乎只能检索到 $0 的值，而永远无法检索到 $53,498。

【问题讨论】：

请将相关代码以TEXT形式发在这里。

标签： javascript jquery checkbox getelementbyid

【解决方案1】：

function myFunction() {
  const element = document.getElementById('demo')

  element.innerText = element.innerText === '$0' ? '$53,498' : '$0'

  document.getElementById('t1-total').innerText = element.innerText
}

编辑：因为您在 cmets -> 完整示例中询问它。

let tuitionFee = 0
let activityFee = 0

const toggle () => {
  const tuition = document.getElementById('tuition')
  const activity = document.getElementById('activity')
  const total = document.getElementById('total')

  tuitionFee = tuitionFee === 0 ? 100 : 0
  activityFee = activityFee === 0 ? 100 : 0

  tuition.innerText = '$' + tuitionFee
  activity.innerText = '$' + activityFee
  total.innerText = '$' + (tuitionFee + activityFee)
}

现在调用你的切换函数。

【讨论】：

太棒了。你摇滚！ :)
在函数 2 中执行 -> document.getElementById('t1-total').innerText = document.getElementById('demo').innerText
想知道我如何将这 2 个值加到一个 id 为 total 的 div 中：` function t1() { var e1 = document.getElementById('t1'); e1.innerText = e1.innerText === '$0' ？ '$53,498' : '$0'; document.getElementById('t1-total').innerText = e1.innerText; } //学费函数 t2() { var e2 = document.getElementById('t2'); e2.innerHTML = e2.innerHTML === '$0' ？ '120' : '$0'; document.getElementById('t2-total').innerText = e2.innerText } //Activity Fee` ...那些代码反引号对我不起作用
更新答案。
不幸的是，无法让完整的示例正常工作。似乎没有拉出正确的价值观

【解决方案2】：

function t1(){
    const element = document.getElementById('t1-total');

    element.innerHTML = ((element.innerHTML === '$0' || element.innerHTML.trim() == '') ? '$53,498' : '$0');
  }

<div>
  <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" id="t1-total"> </div> 
</div>

【讨论】：