How to call javascript function only when checkbox is checked

Question

i have tried this:

    function stickyheaddsadaer() {
        $("#page-header-inner").addClass("sticky");
    }

    <input type="checkbox" name="TT_sticky_header" id="TT_sticky_header_function" 
value="{TT_sticky_header}" onclick="stickyheaddsadaer()"/>

so when i click checkbox, it just nothing happens....

but when i try this:

function stickyheaddsadaer() {
    alert("I am an alert box!");
}

then works...

can you please help me ? I need to activate javasript function by checkbox

and when the js function is actived it add class to the div

Thank you

Answer 1

HTML

<input type="checkbox" id="switch" onclick="change()">

JS

function change() {
    var decider = document.getElementById('switch');
    if(decider.checked){
        alert('check');
    } else {
      alert('unchecked');
    }
}

Answer 2

Better to use onchange event and check inside function if checked or not

function stickyheaddsadaer(obj) {
  if($(obj).is(":checked")){
    alert("Yes checked"); //when checked
    $("#page-header-inner").addClass("sticky");
  }else{
    alert("Not checked"); //when not checked
  }
  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="TT_sticky_header" id="TT_sticky_header_function" value="{TT_sticky_header}" onchange="stickyheaddsadaer(this)"/>