如何使用纯 Javascript 检查 Switch Bootstrap 5

Question

我想用带有函数的纯 Javascript 进行切换。但似乎该函数内的循环不起作用，因为它只能检测默认状态。当我尝试手动设置输入状态时，if-else 语句起作用。但是，如果我点击开关，什么也不会发生。我为此使用 Bootstrap 5 Beta。只要除了引导包 JS 之外不需要框架/库/附加模块，就可以接受任何更好的建议。

这是我的切换 html 代码：

<div class="form-check form-switch mx-3">
    <input class="form-check-input" type="checkbox" id="pricingSwitch">
</div>

这是我的 Javascript 函数：

function pricingTable() {
    console.log("Called")
    var checkbox = document.getElementById('pricingSwitch')

    var priceMonthly = document.getElementsByClassName("price-monthly")
    var priceAnnual = document.getElementsByClassName("price-annual")
    var durationMonth = document.getElementsByClassName("duration-month")
    var durationYear = document.getElementsByClassName("duration-year")

    console.log("Pre Loop")
    for (var i = 0; i < priceMonthly.length; i++) {
        console.log(checkbox.checked)
        console.log(i)
        if (checkbox.checked == true) {
            priceMonthly[i].style.display = "none"
            priceAnnual[i].style.display = "inline-block"
            durationMonth[i].style.display = "none"
            durationYear[i].style.display = "inline-block"
        } else if (checkbox.checked == false) {
            priceMonthly[i].style.display = "inline-block"
            priceAnnual[i].style.display = "none"
            durationMonth[i].style.display = "inline-block"
            durationYear[i].style.display = "none"
        }
    }
}

Answer 1

所以看来我没有为复选框添加侦听器。这是最终的工作代码

var checkbox = document.getElementById('pricingSwitch')

var priceMonthly = document.getElementsByClassName("price-monthly")
var priceAnnual = document.getElementsByClassName("price-annual")
var durationMonth = document.getElementsByClassName("duration-month")
var durationYear = document.getElementsByClassName("duration-year")

function checker(checked) {
  checked ? showAnnual() : showMonthly()
}

function showAnnual() {
  priceMonthly[0].style.display = "none"
  priceAnnual[0].style.display = "inline-block"
  durationMonth[0].style.display = "none"
  durationYear[0].style.display = "inline-block"
}

function showMonthly() {
  priceMonthly[0].style.display = "inline-block"
  priceAnnual[0].style.display = "none"
  durationMonth[0].style.display = "inline-block"
  durationYear[0].style.display = "none"
}

checker(this.checked)

checkbox.addEventListener('change', function () {
  checker(this.checked)
})