Aknosis.com

Fun with jQuery – Checkboxes!!!

Another day with jQuery, this time we are talking about checkboxes. Just like I stated in my previous post about select boxes, jQuery and checkbox integration, if you will, isn't cut and dry but damn near close. So how can jQuery assist with checkboxes? Lots of ways, here are a few examples to keep you entertained. Try and manually select a checkbox and it will still toggle them correctly (turn them off it they are on and vice versa).

jQuery selector for checkboxes

Just like any input you can choose your checkbox(es) with any standard selector.

• By Class

  //Selector
  $('.cb_class')
  

  <!-- Input Html -->
  <input type="checkbox" class="cb_class" />
  

• By Id

  //Selector
  $('#cb')
  

  <!-- Input Html -->
  <input type="checkbox" id="cb" />
  

• By tag and attribute

  //Selector
   $('input[type=checkbox]')
  //Note: This would select all checkboxes
  //(same code in the Toggle Checks button above)
  

  <!-- Input Html -->
  <input type="checkbox" />
  

• By tag and attribute

  //Selector
  $('input[name=checkBoxname]')
  

  <!-- Input Html -->
  <input type="checkbox" name="checkBoxname" />
  

How to tell if a check box is checked?

if($('#cb1').is(':checked')){ //Check if checkbox is checked and alert the result
alert('It is checked');
}else{
alert('Not checked');
}

How to check and uncheck a checkbox

There is no magical built-in function to check and uncheck but use of standard jQuery functions will accomplishes the same task.

//Check Code
//This just adds the checked attribute to the input tag
$('#cb2').attr('checked',true);
//Uncheck Code
//This just removes the checked attribute from the input tag
$('#cb2').attr('checked',false);
//Can also use this:
$('#cb2').removeAttr('checked');

Determine the value of checked boxes

If you have a value assigned to your checked boxes all you need to do is use the .val() function to return the value.

<input id="cb3" type="checkbox" value="Checkbox 3" />

alert('Value: '+$('#cb3').val());

Full Example

This function will get all the values of the checked checkboxes, add the results and display them.

function calcChecked(){
var total = 0;
var str = '0';
 $('#table :checked').each( 
//Execute this function for each ':checked' element in the table
function(){
  var val = parseInt($(this).val()); //Get integer value
 total += val; //Add to the total
str += ' + '+val; //Add to the equation string
$(this).removeAttr('checked'); //Uncheck the checkbox
}
);
str += ' = '+total //Finalize the equation
$('#updater').append('<div style="display:none">'+str+'</div>'); //Add the string to the table
$('#updater div:last').slideDown('slow'); //Use some flare to make it show up
}

	1	2	3	4	5	6
	7	8	9	10	11	12

Need help with something else? Just ask, post a comment and I'll help you out.

Tags: forms, JavaScript, jquery