Ok, so i have a list of check boxes 1, 2, 3, 4 and 5. I would like the function to select 2, 3, 4 and 5 but if 1 is selected then un-select 2, 3, 4 and 5, once 2 to 5 are un-selected display a message in a div.
So far I can select 1 and one of the others... and the message comes on selection of 1
problem 1
I cant un-select 2 to 5 once 1 is selected
problem 2
The message is displayed on page load even if the box is un-selected.
HTML
<input type="checkbox" class="" value="checkbox" name="CheckboxGroup1" id="boxchecked" />
one <br/>
<input type="checkbox" class="check" />
two <br/>
<input type="checkbox" class="check" />
three <br/>
<input type="checkbox" class="check" />
four <br/>
<input type="checkbox" class="check" />
five
<div id="hidden">Two to five can not be selected whilst you have one selected</div>
JavaScript
$('input.check').on('change', function() {
$('input.check').not(this).prop('checked', false);
});
$(document).ready(function(){
$("#boxchecked").click(function ()
{
if ($("#boxchecked").is(':checked'))
{
$("#hidden").show();
}
else
{
$("#hidden").hide();
}
});
});
$('input[name=CheckboxGroup1]').attr('checked', false);
Here is what I propose. How about giving the checkbox that can only be singly checked a class, and the others another class?
Hope it helps.
$('input[type="checkbox"]').on('click', function() {
if($(this).hasClass('singlecheck')) {
if($('input.multicheck').is(":checked")) {
$('#warning').show();
}
$('input.multicheck').prop('checked', false);
} else {
$('input.singlecheck').prop('checked', false);
$('#warning').hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="singlecheck" value="one" name="CheckboxGroup1" id="boxchecked" />
one <br/>
<input type="checkbox" class="multicheck" value="two"/>
two <br/>
<input type="checkbox" class="multicheck" value="three"/>
three <br/>
<input type="checkbox" class="multicheck" value="four"/>
four <br/>
<input type="checkbox" class="multicheck" value="five"/>
five
<div id="warning" style="display:none">Two to five can not be selected whilst you have one selected</div>
What you can do is that you can disable the checkboxes 2-5 as soon as the checkbox 1 is checked and then show the message. If one is not checked your can enable the other checkboxes and hide the message as:
$('input[type="checkbox"]').on('change', function(){
if($('#boxchecked').prop('checked')) {
$('.check').attr('disabled', true);
$('#hidden').show();
}
else {
$('.check').removeAttr('disabled');
$('#hidden').hide();
}
})
#hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="" value="checkbox" name="CheckboxGroup1" id="boxchecked" />
one <br/>
<input type="checkbox" class="check" />
two <br/>
<input type="checkbox" class="check" />
three <br/>
<input type="checkbox" class="check" />
four <br/>
<input type="checkbox" class="check" />
five
<div id="hidden">Two to five can not be selected whilst you have one selected</div>
i think you want this type fuctionality :
jQuery
var box = null;
$(document).ready(function() {
$(".check").click(function() {
box = this.id;
$(".check").each(function() {
if ( this.id == box )
{
this.checked = true;
//$("#hidden").show();
var cval =$(this).val();
document.getElementById("get").innerHTML =cval;
}
else
{
this.checked = false;
};
});
});
});
HTml Code
<input type="checkbox" class="check" value="one" name="CheckboxGroup1" id="one" />
one <br/>
<input type="checkbox" class="check" id="two" value="two" />
two <br/>
<input type="checkbox" class="check" id="three" value="three" />
three <br/>
<input type="checkbox" class="check" id="four" value="four" />
four <br/>
<input type="checkbox" class="check" id="five" value="five" />
five
<div id="hidden">This checkbox number is <label id="get">0</label></div>
I hope its usefull for you
To un-select check box 2-5, you can use something like this:
$('input[name="CheckboxGroup1"]').on('click', function() {
if ($(this).is(":checked")) {
$('input.check').prop('checked', false);
}
})
For message to be hidden initially, you can have an initialization function that will set/reset UI states to default
function initUI() {
$('input[name=CheckboxGroup1]').attr('checked', false);
$('#hidden').hide();
}
Sample Fiddle
Also, for cases where you have if...else to toggle visibility of a field, you should use .toggle(VisibilityValue)
$("#boxchecked").click(function() {
$("#hidden").toggle($("#boxchecked").is(':checked'))
});
Updated Fiddle
Related
how do I select all checkboxes when the first radio input is selected & uncheck all checkboxes when the second radio input is selected? (Javascript)?
I've looked into previous similar questions on here, but they all seem to be about using checkboxes rather than radio buttons, or there aren't ways to unselect.
<input type="radio" class="permission" name="permission" value="select" /> Select All<br>
<input type="radio" class="permission" name="permission" value="deselect" /> Deselect All<br>
<input type="checkbox" class="custom-selector" /> Checkbox 1
<input type="checkbox" class="custom-selector" /> Checkbox 2
<input type="checkbox" class="custom-selector" /> Checkbox 3
Get a list of HTML nodes by class using document.querySelectorAll(). Iterate the radios list using NodeList.forEach(), and add a change event listener to each radio button. Whenever the listener is called, iterate the checkboxes array with NodeList.forEach(), and update the checked value of each element:
var checkboxes = document.querySelectorAll('.custom-selector');
var radios = document.querySelectorAll('.permission');
radios.forEach(function(el) {
el.addEventListener('change', function(e) {
var checked = el.value === 'select';
checkboxes.forEach(function(el) {
el.checked = checked;
});
});
});
<input type="radio" class="permission" name="permission" value="select" /> Select All<br>
<input type="radio" class="permission" name="permission" value="deselect" /> Deselect All<br>
<input type="checkbox" class="custom-selector" /> Checkbox 1
<input type="checkbox" class="custom-selector" /> Checkbox 2
<input type="checkbox" class="custom-selector" /> Checkbox 3
You can do it using JQuery.
$('.permission').click(function() {
$('.custom-selector').prop('checked', $(this).val() == 'select');
});
See below Code Snippet
$('.permission').click(function() {
$('.custom-selector').prop('checked', $(this).val() == 'select');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" class="permission" name="permission" value="select" /> Select All<br>
<input type="radio" class="permission" name="permission" value="deselect" /> Deselect All<br>
<input type="checkbox" class="custom-selector" /> Checkbox 1
<input type="checkbox" class="custom-selector" /> Checkbox 2
<input type="checkbox" class="custom-selector" /> Checkbox 3
function handleChange(e) {
if (e.target.value == "select") {
handleCheckUncheck(true);
}
if (e.target.value == "deselect") {
handleCheckUncheck(false);
}
}
function handleCheckUncheck(value) {
document.querySelectorAll("input[type='checkbox']").forEach(function(val) {
val.checked = value;
})
}
document.querySelectorAll("input[type='radio']").forEach(function(val) {
val.addEventListener("change", handleChange);
})
<input type="radio" class="permission" name="permission" value="select" /> Select All<br>
<input type="radio" class="permission" name="permission" value="deselect" /> Deselect All<br>
<input type="checkbox" class="custom-selector" /> Checkbox 1
<input type="checkbox" class="custom-selector" /> Checkbox 2
<input type="checkbox" class="custom-selector" /> Checkbox 3
You can do it in a simple way without using jQuery.
Add a checkbox whose status will be set for others.
<label><input type="checkbox" onClick="toggle(this)" /> Select All</label>`
And use this javascript function that will check other checkboxes with the 'custom-selector' class:
function toggle(source) {
checkboxes = document.getElementsByName('custom-selector[]');
for(var i=0, n=checkboxes.length;i<n;i++) {
checkboxes[i].checked = source.checked;
}
}
If someone checks the "Select All" checkbox, all others will also be selected. If it deselects, the effect will be the same.
Regards!
I agree with #OriDrori's answer, You don't need to load jQuery to do such a simple task.
I am totally new to web development so please do not leave any negative marks for this question. If you do not like this question please leave it as for another one who wish to answer.
There are 2 check box groups 'main' & 'sub.
if user select 'Main_CheckBox_1' from 'main' need to show 'Sub_Checkbox_1_Main_1' and 'Sub_Checkbox_2_Main_1' from 'sub'
and also if user select 'Main_CheckBox_2' need to show 'Sub_Checkbox_1_Main_2' & 'Sub_Checkbox_2_Main_2'
<div id = "mainDiv" >
<input type="checkbox" name="main" value="main_1"><span>Main_CheckBox_1</span> <br/>
<input type="checkbox" name="main" value="main_1"><span>Main_CheckBox_2</span><br/>
<input type="checkbox" name="main" value="main_1"><span>Main_CheckBox_2</span><br/>
</div>
<div id = "subDiv" >
<input type="checkbox" name="sub" value="Sub_1_of_main_1"><span>Sub_Checkbox_1_Main_1</span> <br/>
<input type="checkbox" name="sub" value="Sub_2_of_main_1"><span>Sub_Checkbox_2_Main_1</span><br/>
<input type="checkbox" name="sub" value="Sub_1_of_main_2"><span>Sub_Checkbox_1_Main_2</span><br/>
<input type="checkbox" name="sub" value="Sub_2_of_main_2"><span>Sub_Checkbox_2_Main_2</span><br/>
<input type="checkbox" name="sub" value="Sub_1_of_main_3"><span>Sub_Checkbox_1_Main_3</span><br/>
<input type="checkbox" name="sub" value="Sub_2_of_main_3"><span>Sub_Checkbox_2_Main_3</span><br/>
</div>
1. how to identify which check box is selected from 'main' ?
2. how to show/hide check boxes in 'sub' depending on 'main' check boxes ?
Thanks you
1) Give all inputs with name main input[name='main'] the trigger to act on change. Then this.value will tell you which one in particular was changed.
2) Make a function that takes this.valueas parameter and then toggle (hide/show) the two corresponding checkboxes and the next element ()
$(document).ready(function() {
$("input[name='main']").change(function() {
showHide(this.value);
});
});
function showHide (chkbx) {
var k = "input[value='Sub_1_of_"+chkbx+"']";
$(k).toggle(0);
$(k).next().toggle(0);
var k = "input[value='Sub_2_of_"+chkbx+"']";
$(k).toggle(0);
$(k).next().toggle(0);
}
It'd be easier if you'd grouped your sub checkboxes like below. Use CSS to hide all groups during load. This would produce a lot more cleaner and readable DOM/code.
$(function() {
var $groups = $("#subDiv .group");
$('#mainDiv :checkbox').on("change", function() {
var index = parseInt($(this).val().slice(-1), 10) - 1;
$groups.eq(index).toggle(this.checked).siblings().hide();
});
});
#subDiv .group {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id = "mainDiv" >
<input type="checkbox" name="main" value="main_1" /><span>Main_CheckBox_1</span> <br/>
<input type="checkbox" name="main" value="main_2" /><span>Main_CheckBox_2</span><br/>
<input type="checkbox" name="main" value="main_3" /><span>Main_CheckBox_3</span><br/>
</div>
<div id = "subDiv" >
<div class="group">
<input type="checkbox" name="sub" value="Sub_1_of_main_1" /><span>Sub_Checkbox_1_Main_1</span> <br/>
<input type="checkbox" name="sub" value="Sub_2_of_main_1" /><span>Sub_Checkbox_2_Main_1</span><br/>
</div>
<div class="group">
<input type="checkbox" name="sub" value="Sub_1_of_main_2" /><span>Sub_Checkbox_1_Main_2</span><br/>
<input type="checkbox" name="sub" value="Sub_2_of_main_2" /><span>Sub_Checkbox_2_Main_2</span><br/>
</div>
<div class="group">
<input type="checkbox" name="sub" value="Sub_1_of_main_3" /><span>Sub_Checkbox_1_Main_3</span><br/>
<input type="checkbox" name="sub" value="Sub_2_of_main_3" /><span>Sub_Checkbox_2_Main_3</span><br/>
</div>
</div>
Hello I've got a question about chechbox.
This code checked/unchecked all checkboxes if first one is checked/unchecked.
But I want to do something else with that. I want to add function that, if all of checkboxes are checked then the first one too, but when one or more of the checkboxes are unchecked then first one will be unchecked.
<input class="checkbox" onClick=Show("checkbox") type="checkbox" name="checkboxAll" value="all">
<input class="checkbox" type="checkbox" name="checkboxname1" value="1">
<input class="checkbox" type="checkbox" name="checkboxname2" value="2">
<input class="checkbox" type="checkbox" name="checkboxname3" value="3">
js code:
function Show( a ) {
if ( $("."+a).attr('checked') == true )
$("."+a).attr('checked', true);
else
$("."+a).attr('checked', false);
}
change your child element class names and call it in your show function. It will do the work for you. It is not working right now as expected as the class names are same for 1st one also as the others.
I have changed the names of you checkBoxes a bit, but from what I can understand in your question, this will work:
<input id="first" onClick="Show();" type="checkbox" name="checkboxAll" value="all">
<input class="checkbox" onClick="check();" type="checkbox" name="checkboxname1" value="1">
<input class="checkbox" onClick="check();" type="checkbox" name="checkboxname2" value="2">
<input class="checkbox" onClick="check();" type="checkbox" name="checkboxname3" value="3">
and the js:
function Show() {
if ($('#first').is(':checked')){
$(".checkbox").prop('checked', true);
}
else{
$(".checkbox").prop('checked', false);
}
}
function check(){
allChecked = true;
$(".checkbox").each(function(){
if (!$(this).is(':checked')){
allChecked = false;
}
});
if (allChecked){
$("#first").prop('checked', true);
}
else{
$("#first").prop('checked', false);
}
}
It is better to use the "prop" than the "attr" function, see here: How to check whether a checkbox is checked in jQuery?
Try this
$(function(){
$('input[name="checkboxAll"]').change(function(){
$('input[name^="checkboxname"]').prop("checked",$(this).is(':checked'))
});
$('input[name^="checkboxname"]').change(function(){
var a=$('input[name^="checkboxname"]').length;
if( $('input[name^="checkboxname"]').filter(":checked").length==a){
$('input[name="checkboxAll"]').prop("checked",true)}
else
{
$('input[name="checkboxAll"]').prop("checked",false)
}
});
});
DEMO
Include jQuery and copy and paste this code
Its working.......
<script>
$(function(){
$('#select_all_').click(function(){
if($('#select_all_').is(':checked')){
$(".check_").attr ( "checked" ,"checked" );
}
else
{
$(".check_").removeAttr('checked');
}
});
$('.check_').click(function(){
$.each($('.check_'),function(){
if(!$(this).is(':checked'))
$('#select_all_').attr('checked',false);
});
});
});
</script>
<input type="checkbox" name="chkbox" id="select_all_" value="1" />
<input type="checkbox" name="chkbox" class="check_" value="Apples" />
<input type="checkbox" name="chkbox" class="check_" value="Bananas" />
<input type="checkbox" name="chkbox" class="check_" value="Apples" />
<input type="checkbox" name="chkbox" class="check_" value="Bananas" />
I have to make mutually exculsive checkboxes. I have come across numerous examples that do it giving example of one checkbox group.
One example is at http://blog.schuager.com/2008/09/mutually-exclusive-checkboxes-with.html.
In my case, I have many checkbox groups on the same page, so I want it to work like this example.
An asp.net codebehind example is here, but I want to do it in client side code.
How can I do this in JavaScript?
i have decided to use the ajax mutually exclusive checkbox extender.
The solutions given so far are basically based on radio buttons.
This link really helped me..http://www.asp.net/ajax/videos/how-do-i-use-the-aspnet-ajax-mutuallyexclusive-checkbox-extender
Using Mutual Checkboxes when there is Radio button is a bad idea but still you can do this as follows
HTML
<div>
Red: <input id="chkRed" name="chkRed" type="checkbox" value="red" class="checkbox">
Blue: <input id="chkBlue" name="chkBlue" type="checkbox" value="blue" class="checkbox">
Green: <input id="chkGreen" name="chkGreen" type="checkbox" value="green" class="checkbox">
</div>
<div>
Mango: <input id="chkRed" name="chkMango" type="checkbox" value="Mango" class="checkbox">
Orange: <input id="chkBlue" name="chkOrange" type="checkbox" value="Orange" class="checkbox">
Banana: <input id="chkGreen" name="chkBanana" type="checkbox" value="Banana" class="checkbox">
</div>
Jquery
$('div .checkbox').click(function () {
checkedState = $(this).attr('checked');
$(this).parent('div').children('.checkbox:checked').each(function () {
$(this).attr('checked', false);
});
$(this).attr('checked', checkedState);
});
And here is fiddle
Like I said in my comment, you should really use <radio> elements for this. Give them the same name and they work almost the same way:
<label><input type="radio" name="option" value="Option 1">Option 1</label>
<label><input type="radio" name="option" value="Option 2">Option 2</label>
The only significant difference is that, once one of them is selected, at least one of them has to be on (ie, you can't uncheck them again).
If you really feel the need to do it with check boxes, remind yourself that users with JavaScript disabled will be able to select all the options if they like. If you still feel the need to do it, then you'll need to give each checkbox group a unique class name. Then, handle the change event of each checkbox element and uncheck all the other elements matching the same class name as the clicked element.
I hope this one will work
HTML
A <input type="checkbox" class="alpha" value="A" /> |
B <input type="checkbox" class="alpha" value="B" /> |
C <input type="checkbox" class="alpha" value="C" />
<br />
1 <input type="checkbox" class="num" value="1" /> |
2 <input type="checkbox" class="num" value="2" /> |
3 <input type="checkbox" class="num" value="3" />
JavaScript
// include jQuery library
var enforeMutualExcludedCheckBox = function(group){
return function() {
var isChecked= $(this).prop("checked");
$(group).prop("checked", false);
$(this).prop("checked", isChecked);
}
};
$(".alpha").click(enforeMutualExcludedCheckBox(".alpha"));
$(".num").click(enforeMutualExcludedCheckBox(".num"));
well, radio button should be the one to be used in mutually excluded options, though I've encountered a scenario where the client preferred to have zero to one selected item, and the javaScript'ed checkbox works well.
Update
Looking at my answer, I realized it's redundant to refer to the css class twice. I updated my code to convert it into a jquery plugin, and created two solutions, depending on ones preference
Get all checkboxes whose check is mutually excluded
$.fn.mutuallyExcludedCheckBoxes = function(){
var $checkboxes = this; // refers to selected checkboxes
$checkboxes.click(function() {
var $this = $(this),
isChecked = $this.prop("checked");
$checkboxes.prop("checked", false);
$this.prop("checked", isChecked);
});
};
// more elegant, just invoke the plugin
$("[name=alpha]").mutuallyExcludedCheckBoxes();
$("[name=num]").mutuallyExcludedCheckBoxes();
HTML
A <input type="checkbox" name="alpha" value="A" /> |
B <input type="checkbox" name="alpha" value="B" /> |
C <input type="checkbox" name="alpha" value="C" />
<br />
1 <input type="checkbox" name="num" value="1" /> |
2 <input type="checkbox" name="num" value="2" /> |
3 <input type="checkbox" name="num" value="3" />
sample code
Group all mutually excluded checkboxes in a containing element
JavaScript
$.fn.mutuallyExcludedCheckBoxes = function(){
var $checkboxes = this.find("input[type=checkbox]");
$checkboxes.click(function() {
var $this = $(this),
isChecked = $this.prop("checked");
$checkboxes.prop("checked", false);
$this.prop("checked", isChecked);
});
};
// select the containing element, then trigger the plugin
// to set all checkboxes in the containing element mutually
// excluded
$(".alpha").mutuallyExcludedCheckBoxes();
$(".num").mutuallyExcludedCheckBoxes();
HTML
<div class="alpha">
A <input type="checkbox" value="A" /> |
B <input type="checkbox" value="B" /> |
C <input type="checkbox" value="C" />
</div>
<div class="num">
1 <input type="checkbox" value="1" /> |
2 <input type="checkbox" value="2" /> |
3 <input type="checkbox" value="3" />
</div>
sample code
Enjoy :-)
Try this:
HTML
<div>
Car: <input id="chkVehicleCar" name="chkVehicle" type="checkbox" value="Car" class="radiocheckbox">
Moto: <input id="chkVehicleMoto" name="chkVehicle" type="checkbox" value="Moto" class="radiocheckbox">
Byke: <input id="chkVehicleByke" name="chkVehicle" type="checkbox" value="Byke" class="radiocheckbox">
Feet: <input id="chkVehicleFeet" name="chkVehicle" type="checkbox" value="Feet">
</div>
<span>
Red: <input id="chkColorRed" name="chkColor" type="checkbox" value="Red" class="radiocheckbox">
Blue: <input id="chkColorBlue" name="chkColor" type="checkbox" value="Blue" class="radiocheckbox">
Green: <input id="chkColorGreen" name="chkColor" type="checkbox" value="Green" class="radiocheckbox">
Mango: <input id="chkFruitMango" name="chkFruit" type="checkbox" value="Mango" class="radiocheckbox">
Orange: <input id="chkFruitOrange" name="chkFruit" type="checkbox" value="Orange" class="radiocheckbox">
Banana: <input id="chkFruitBanana" name="chkFruit" type="checkbox" value="Banana" class="radiocheckbox">
</span>
​JavaScript/jQuery
$(':checkbox.radiocheckbox').click(function() {
this.checked
&& $(this).siblings('input[name="' + this.name + '"]:checked.' + this.className)
.prop('checked', false);
});​
Mutually exclusive checkboxes are grouped by container+name+classname.
You can use different groups in same container and also mix exclusive with non-exclusive checkbox with same name.
JavaScript code is highly optimized. You can see a working example.
No matter where the check box is located on your page, you just need to specify the group and here you go!
<input type='checkbox' data-group='orderState'> pending
<input type='checkbox' data-group='orderState'> solved
<input type='checkbox' data-group='orderState'> timed out
<input type='checkbox' data-group='sex'> male
<input type='checkbox' data-group='sex'> female
<input type='checkbox'> Isolated
<script>
$(document).ready(function () {
$('input[type=checkbox]').click(function () {
var state = $(this)[0].checked,
g = $(this).data('group');
$(this).siblings()
.each(function () {
$(this)[0].checked = g==$(this).data('group')&&state ? false : $(this)[0].checked;
});
});
})</script>
I guess this is what you want.
Consider the HTML below:
<form action="">
My favourite colors are:<br />
<br />
<input type="checkbox" value="red" name="color" /> Red<br />
<input type="checkbox" value="yellow" name="color" /> Yellow<br />
<input type="checkbox" value="blue" name="color" /> Blue<br />
<input type="checkbox" value="orange" name="color1" /> Orange<br />
<input type="checkbox" value="green" name="color1" /> Green<br />
<input type="checkbox" value="purple" name="color1" /> Purple
</form>
Note that there's two names for color groups: red, yellow, blue and orage, green, purple
And this JavaScript noted below will work generically to all checkbox on the page.
jQuery("input[type=checkbox]").unbind("click");
jQuery("input[type=checkbox]").each(function(index, value) {
var checkbox = jQuery(value);
checkbox.bind("click", function () {
var check = checkbox.attr("checked");
jQuery("input[name=" + checkbox.attr('name') + "]").prop("checked", false);
checkbox.attr("checked", check);
});
});
Take a look at this LIVE example
When I click a button I want to get the value from each of the checked check boxes. I really just want to populate an array with all the check boxes that are checked.
I started a simplified example here: http://jsfiddle.net/kralco626/JvAdg/1/
The actual code is more like this:
var dataList = new Array(10);
dataList[0] = "Delete";
dataList[1] = LD_LicenseNumber.val();
dataList[2] = $("#LDOperatingCompanies input:checked").val();
And aspx code:
<div id="LDOperatingCompanies">
<input type="checkbox" value="o1" id="o1" name="LDOperatingCompanies" /><label for="o1">o1</label>
<input value="o2" type="checkbox" id="o2" name="LDOperatingCompanies" /><label for="o2">o2</label>
<input value="o3" value="o1" type="checkbox" id="o3" name="LDOperatingCompanies" /><label for="o3">o3</label>
</div>
Thanks!
here is an update to your fiddle that puts all checked boxes into an array Example
HTML
<div id="LDOperatingCompanies">
<input type="checkbox" id="o1" name="LDOperatingCompanies" /><label for="o1">o1</label>
<input type="checkbox" id="o2" name="LDOperatingCompanies" /><label for="o2">o2</label>
<input type="checkbox" id="o3" name="LDOperatingCompanies" /><label for="o3">o3</label>
</div>
<input type="button" id="btn" value="alert checked boxes" />
JavaScript
var checks = [];
$('#btn').click(function(e) {
$(':checked').each(function(index, item) {
checks.push( item );
});
if(checks.length == 0) alert('nothing checked');
else alert(checks);
});