Tuesday, 19 May 2015

Check All by jQuery

Check All by jQuery

Method 1: 
$(document).ready(function() {
    $('#selectAll').click(function(event) {
        if(this.checked) { // check select status
            $('.checkbox1').each(function() {
                this.checked = true;  //select all checkboxes with class "checkbox1"            
            });
        }else{
            $('.checkbox1').each(function() {
                this.checked = false; //deselect all checkboxes with class "checkbox1"                    
            });      
        }
    });
 
});

Html
<div>
<input type="checkbox" id="selectAll">Check All
</div>
<div>
<input type="checkbox" class="checkbox1">Home
<input type="checkbox" class="checkbox1">About
<input type="checkbox" class="checkbox1">Page

</div>

Method 2: 

$("#checkAll").click(function(){
    $('input:checkbox').not(this).prop('checked', this.checked);
});

OR

$("#checkAll").click(function() {
$(".checkbox1").prop("checked", $("#checkAll").prop("checked"))
})
});

Html
<div>
<input type="checkbox" id="checkAll">Check All
</div>
<div>
<input type="checkbox" class="checkbox1">Home
<input type="checkbox" class="checkbox1">About
<input type="checkbox" class="checkbox1">Page
</div>

Method 3: If you make multiple check all 

<input class="selectAll" type="checkbox" onclick="selectAll(this, this.checked)">

function selectAll(currentcheck, status) {
var parentdiv = $(currentcheck).parents('li:first');
$(parentdiv).find("input:checkbox").prop('checked', true);
if(status === false) {
$(parentdiv).find("input:checkbox").prop('checked', false);
} else {
$(parentdiv).find("input:checkbox").prop('checked', true);
}
}

Check if checkbox is checked

Example 1 :.
if($('input[type=checkbox]:checked').length>0)
{
             alert("please check atleast one");
    }
Example 2:
if($('input[type="checkbox"]').is(':checked')){
             alert("Please check at least one.");
             return false;
    }

0 comments:

Post a Comment