选中复选框时更改 html 元素内容不起作用

Question

我想知道如何在单击复选框后更改 <p> 标签的内容。

我试着用 if 语句来做，但似乎什么也没有发生。

HTML:

<label class="switch">
    <input type="checkbox">
    <span class="slider round"></span>
</label>


<div class="pricing-box pricing-box-active" id="basic">
    <h2>Basic</h2>
    <div class="price">
        <p>9.99</p>
    </div>
</div>

JS:

var inputBtn = document.querySelector("input")

if(inputBtn.checked === true) {
    console.log("Toggle is checked")

    var basic = document.querySelector("#basic .price p"); 
    basic.textContent = ".99";   
}

Answer 1

您的 if 语句应该在回调函数中，当复选框发生一些变化时。喜欢inputBtn.addEventListener("change", ()=>{})

选中复选框时更改 html 元素内容不起作用

Changing html element content when checkbox is checked not working

javascript

html

checkbox

checked