Wednesday, February 4, 2009

Handling the multiple checkboxs with jquery for Check All, Uncheck All and get selected values

Handling the multiple checkboxes with jquery for Check All, Uncheck All
and get values from selected values


include jquery

<script language="JavaScript" src="youserveraddres/js/jquery.js"></script>


your html

<input name="phpqa[]" type="checkbox" value="1">1
<input name="phpqa[]" type="checkbox" value="2">2
<input name="phpqa[]" type="checkbox" value="3">3
<input name="phpqa[]" type="checkbox" value="4">4
<input name="phpqa[]" type="checkbox" value="5">5
<input name="phpqa[]" type="checkbox" value="6">6
<input name="phpqa[]" type="checkbox" value="7">7
<input name="phpqa[]" type="checkbox" value="8">8

<a href="javascript:void();" onclick="markAll()">Check All</a>
<a href="javascript:void();" onclick="unMarkAll()">Uncheck All</a>
<a href="javascript:void();" onclick="getSelectedVals()">Get Checked Values</a>


// function for mark all / check all

function markAll(){
$("input[@name='phpqa[]']").each(function() {
this.checked = true;
});
}


// function for uncheck all

function unMarkAll(){
$("input[@name='phpqa[]']").each(function() {
this.checked = false;
});
}


//fetching selected values / checked values

function getSelectedVals(){
$("input[@name='phpqa[]']").each(function() {
if ($(this).attr('checked'))
{
alert($(this).val());
}
});
}

demo here


if you have any doubts lemme know..
enjoy jquerying.........

1 comment:

  1. to make a single checked and uncheck

    $('#phpqa').attr('checked', true);
    $('#phpqa').attr('checked', false);

    html looks like
    <input type="checkbox" name="phpqa" id="phpqa">

    ReplyDelete

Please put your comments here. your questions, your suggestions, also what went wrong with me.