HTML Checkbox And Javascript jQuery – Different Scenarios With Examples

June 6, 2018 4:21 am by ATS Staff

// onclick if check bind
jQuery('#checkbox').click(function(){
    if (this.checked) {
        ...
    }
    else {
        ...
    }
});

----

// if checkbox not checked
if( !(jQuery("#accept_terms").is(':checked'))) {
   ...
}

// or using .length
if( !( jQuery("#accept_terms:checked").length ) ) {
   ...
}

----

// programatically have a checkbox checked
jQuery('.myCheckbox')[0].checked = true;         // jQuery any version
jQuery('#income_bracket').attr('checked', true); // jQuery 1.5 or below
jQuery('#income_bracket').prop('checked');       // jQuery 1.6+


----

Select All/None

<input type="checkbox" onchange="checkAll(this)" id="select_all"> <br /><br />

<input type="checkbox" name="input" /> 1 <br />
<input type="checkbox" name="input" /> 2 <br />
<input type="checkbox" name="input" /> 3 <br />
<input type="checkbox" name="input" /> 4 <br />

 function checkAll(ele) {
     var checkboxes = document.getElementsByTagName('input');
     if (ele.checked) {
         for (var i = 0; i < checkboxes.length; i++) {
             if (checkboxes[i].type == 'checkbox') {
                 checkboxes[i].checked = true;
             }
         }
     } else {
         for (var i = 0; i < checkboxes.length; i++) {
             console.log(i)
             if (checkboxes[i].type == 'checkbox') {
                 checkboxes[i].checked = false;
             }
         }
     }
 }