How to get checkbox checked value and run code on if checked value is true

Question

I have input with an id and i need to add a class to the id when it is checked(true) and remove when it is false.

<input id="<?= $ec['id']?>" type="checkbox" value="<?= $ec['id']?>" class="category" onclick="handleClick(this)" >

 <script>
            function handleClick(cb) {
                var id= cb.id;var checked = cb.checked ;
                console.log("id is " + id + cb.checked);

                if ($('#id').is(':checked')) {
                    console.log("inside if");
                }

            }
 </script>

Answer 1

Use .toggleClass() with state

 function handleClick(cb) { $(cb).toggleClass('checked', cb.checked); } 

 .checked { border: solid #ff0000 5px; width: 30px; height: 30px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <input type="checkbox" value="100" class="category" onclick="handleClick(this)"> 

Answer 2

You can try this

function handleClick(cb) {
   var id= cb.id;
   var checked = cb.checked ;
   console.log("id is " + id + cb.checked);

   if(cb.checked) {
      $(cb).addClass('check');
   }
   else {
      $(cb).removeClass('check');
   }
}

Answer 3

function handleClick(cb) 
{
   $(cb).prop('checked') ? $(cb).addClass('checkboxSelected') : $(cb).removeClass('checkboxSelected'); 
}