JSFiddle - React, Tailwind, and code Playground

HTML

<input type="checkbox" name="Semi Annual" id="1" value="0">
        Semi Annual <br>
<input type="checkbox" name="Quaterly" id="2" value="0">
        Quaterly <br>
<input type="checkbox" name="Monthly" id="3" value="0">
        Monthly <br>

JavaScript

$('input[type="checkbox"]').change(function(){
    
    // Changes value to 1 or 0 depending on whether it is checked or not
    if(this.value == 0){
        this.value = 1;
    }
    else{
        this.value = 0;  
    }
    
    // Log shows the value of each checkbox and also that the .checked property does the same thing by default
    $('input[type="checkbox"]').each(function(index, element){
        if(element.checked){
            console.log(this.name + ' has value of ' + this.value);
            console.log(this.name + ' is checked');   
        }
        else{
            console.log(this.name + ' has value of ' + this.value);
            console.log(this.name + ' is not checked');             
        }
    });
});