JSFiddle - React, Tailwind, and code Playground

by subodhghulaxe

HTML

<input type="checkbox" name="mycheckbox" id="mycheckbox" />
<br><br>
<input type="button" id="test-with-checked" value="Test with checked" />
<input type="button" id="test-with-is" value="Test with is" />
<input type="button" id="test-with-prop" value="Test with prop" />
<input type="button" id="test-with-attr" value="Test with attr" />

JavaScript

$(document).ready(function(){

    var check;    

    // Example 1 - With checked
    $("#test-with-checked").on("click", function(){
        if(mycheckbox.checked) {
            alert("Checkbox is checked.");
        } else {
            alert("Checkbox is unchecked.");
        }
    });  
    
    // Example 2 - With jQuery is, NOTE - :checked
    $("#test-with-is").on("click", function(){
        check = $("#mycheckbox").is(":checked");
        if(check) {
            alert("Checkbox is checked.");
        } else {
            alert("Checkbox is unchecked.");
        }
    });    
    
    // Example 3 - With jQuery prop  
    $("#test-with-prop").on("click", function(){
        check = $("#mycheckbox").prop("checked");
        if(check) {
             alert("Checkbox is checked.");
        } else {
            alert("Checkbox is unchecked.");
        }
    }); 
    
});