Changing html element content when checkbox is checked not working

I'm trying to figure out how to change the content of my p tag once I click the checkbox. I tried doing it with a if-statement, but nothing seems to happen.

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>$199.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 = "$19.99";
   
}