We Keep Coding

How can I tell if the checkboxes are checked?

I need to be able to tell if the checkboxes are checked to do some basic validation. Problem: I don't have access to the PHP generating this. There is no class added, or the basic checked=checked that most forms have. What's the easiest way to target the checked boxes?
http://www.inpresence.in/event-registration?ee=4
EDIT: freak out!! here's the code, i just need to target the checked boxes, everything else is working. the :checked method of jquery uses checked=checked within the checkbox, which isn't there.
$(document).ready(function(){
//when the submit button is clicked...
$("input.btn_event_form_submit").click(function(){
//find the value of the drop down with one evening or four evenings
var priceOption = $("#price_option-4").val();
//match a string ending with "one evening" as the first numbers will be randomly generated by php
var oneEvening = /^\d{2}\|One Evening$/.test(priceOption);
//match a string ending with "four evenings" as the first numbers will be randomly generated by php
var fourEvenings = /^\d{2}\|Four Evenings$/.test(priceOption);
//HOW DO I GET THE CHECKED BOXES?!
var checkedBoxCount = $('#dates-1351733097 .valid').is(':checked').length;
//if one evening is selected make sure the checked boxes count does in fact equal one
if(oneEvening && checkedBoxCount != 1){
//if it doesn't alert the user and return false
alert('You must select one date');
return false;
}
//if one evening isn't selected, four is. make sure the count does indeed in 4
else if (fourEvenings && checkedBoxCount != 4){
//if it doesnt alert the user and return to the form
alert('You must select four dates');
return false;
}
//else, everything checks out!
else {
return;
}
});
});

Using this JavaScript code you can check if a checkbox is checked:
var isChecked = document.getElementById("my-checkbox").checked;
Or using jQuery:
var isChecked = $('#my-checkbox').is(':checked');
EDIT: Try this and tell me if it works:
var checkedBoxCount = $('#dates-1351733097 .valid:checked').length;

Have you tried using jquery to resolve this?
http://jquery-howto.blogspot.co.uk/2008/12/how-to-check-if-checkbox-is-checked.html
$('#edit-checkbox-id').is(':checked');

use the jquery :checked selector. http://api.jquery.com/checked-selector/

This will give you a boolean in javascript of what you want:
document.getElementById("Nov.12-4_1").checked
You can view source and find the elements to view whatever id's they have.
Other answers: the OP didn't specify that he wanted a jquery answer. If he hasn't used jquery for anything up to this point. I think adding it just for this would be a tad overkill.

Show an element if all radio boxes have a selection in jQuery

I am trying to make a form show/hide a submit button dependant on if all the radio elements have a selection - this is what i've got so far.. Any ideas what i'm doing wrong?
$(document).ready(function() {
$('#submit-btn').hide();
if ($(':radio:checked').length > 0) {//try reach selected radio here
$('#submit-btn').show();
}
});

var count = 0
$(':radio').each(function(){
count++;
});
if ($(':radio:checked').length == count) {
$('#submit-btn').show();
}
This might help your cause..!!

$('.toCheck').length == $('.toCheck:checked').length;
If that evaluates to true, then all input for that selector are checked! :)

This will return true if ANY radio element is checked, which is not what you want.
Unfortunately there is no quick way to deal with radio elements, since even if one is checked the others will not show as checked.
You'll have to manually loop over them.

I worked it out using Robin's snippet with some modification.
I didn't explain properly that each 'question' has a set of 5 radio buttons (my fault) - but the following code does what I need now.
Essentially the same as Robins except as each question has 5 radio boxes I divide the length by 5 and it works now! Thank you everyone :)
$(document).ready(function() {
$('#submit-btn').hide();
$("form input:radio").change(function() {
var questions = ($('.questions').length / 5);
var checked = ($('.questions:checked').length);
if (questions == checked)
{
$('#submit-btn').show();
}
});
});

Custom styled checkboxes - problem with my JavaScript logic (an else branch is not getting hit)

I'm creating some custom "checkboxes" and what I mean by that is I'm just stylizing label elements and will be positioning the checkbox off the screen. This is the design/functionality that came in, so I figured I'd give it a go using semantic checkboxes.
What I want is when you click one of these custom "checkboxes" (you're really triggering the stylized label), the "checkbox" should change color and the background div behind all the "checkboxes" should "light up" as well. I've got all that working.
When you uncheck the "checkboxes", that "checkbox" would unhighlight but you should still get the background div color while you have any "checkboxes" checked. When you uncheck that final "checkbox", it should unhighlight and turn off that background div color. This is where I'm having problems.
Best illustrated with an example!
http://jsfiddle.net/xS2JU/
I've got console.log statements and if you watch them, you'll see I'm not executing that 3rd branch when you turn off the last checkbox. I'm just keeping track of the checked state and using a simple counter to keep track of how many "checkboxes" are checked. Anyone have any ideas?

Live Demo
Since this is only doing it onchange count would always be at LEAST 1, so it was never at 0 thus the 3rd branch was never called. Or a better explanation, if one was unchecked it HAD to be checked prior, making count start at 1 on the last call. I just moved your condition inside of the 2nd condition because this is where you uncheck, at that point you see if they all are unchecked.
$(function() {
var $help_choices = $('#help_choices'),
count = 0;
console.log(count);
$('input:checkbox', $help_choices).change(function() {
var checked = this.checked,
$label = $(this).parent();
if (checked) { //additive checkboxes, check one or multiples
$help_choices.addClass('help_choices_selected');
$label.addClass('help_label_selected');
count++;
console.log(checked + ' ' + count);
} else { //subtractive checkboxes, uncheck one or multiples
count--;
$label.removeClass('help_label_selected');
// Put the final check here
if(count === 0){
$help_choices.removeClass('help_choices_selected');
$label.removeClass('help_label_selected');
console.log(checked + ' ' + count + ' 3rd branch');
}
}
});
});
Also heres a bit shorter code where you dont have to keep track of count, could be optimized further, but basically I just check if any inputs are checked within the parent by getting the length of the input:checked on the #help_choices element.
Demo 2
$(function() {
var $help_choices = $('#help_choices');
$('input:checkbox', $help_choices).change(function() {
var checked = this.checked,
$label = $(this).parent();
if (checked) { //additive checkboxes, check one or multiples
$help_choices.addClass('help_choices_selected');
$label.addClass('help_label_selected');
} else{ //subtractive checkboxes, uncheck one or multiples
$label.removeClass('help_label_selected');
if($('#help_choices input:checked').length === 0){
$help_choices.removeClass('help_choices_selected');
}
}
});
});

The problem is that when there is exactly one checkbox checked and you uncheck it, it will go down the second branch because count > 0 (until you decrement it inside that branch), and thus you'll never enter the last branch. Also, you don't really need to test count >=0 in the first if because (once you get the code working) count will always be >=0.
Remove the else from the third branch and just make it an if inside the second branch.
if (checked) { //additive checkboxes, check one or multiples
$help_choices.addClass('help_choices_selected');
$label.addClass('help_label_selected');
count++;
} else if (!checked && count > 0) { //subtractive checkboxes, uncheck one or multiples
count--;
$label.removeClass('help_label_selected');
if (count == 0) { //now no checkboxes selected
$help_choices.removeClass('help_choices_selected');
}
}

Instead of incrementing and decrementing the count variable inside the if/else conditions. Do it as a first thing in the change event handler. It makes your logic very simple.
if(checked)
count++;
else
count--;
Working demo

jQuery see if any or no checkboxes are selected

I know how to see if an individual checkbox is selected or not.
But Im having trouble with the following - given a form id I need to see if any of the checkboxes are selected (i.e 1 or more), and I need to see if none are selected. Basically I need two separate functions that answer these two questions. Help would be appreciated. Thanks!
Actually, I would just need a function to tell me if none are selected. Knowing this would answer the other question.

You can use something like this
if ($("#formID input:checkbox:checked").length > 0)
{
// any one is checked
}
else
{
// none is checked
}

JQuery .is will test all specified elements and return true if at least one of them matches selector:
if ($(":checkbox[name='choices']", form).is(":checked"))
{
// one or more checked
}
else
{
// nothing checked
}

You can do this:
if ($('#form_id :checkbox:checked').length > 0){
// one or more checkboxes are checked
}
else{
// no checkboxes are checked
}
Where:
:checkbox filter selector selects all checkbox.
:checked will select checked checkboxes
length will give the number of checked ones there

Without using 'length' you can do it like this:
if ($('input[type=checkbox]').is(":checked")) {
//any one is checked
}
else {
//none is checked
}

This is what I used for checking if any checkboxes in a list of checkboxes had changed:
$('input[type="checkbox"]').change(function(){
var itemName = $('select option:selected').text();
//Do something.
});

Rahul's answer is best fit for your question. Anyway, if you have a group of checkboxes to be checked and not all the checkbox in your form, you can go for it.
Put a classname for all the checkboxes you want to check, say for example, a classname test_check and now you can check if any of the checkbox is checked belonging to the group by:
$("#formID .test_check:checked").length > 0
If it returns true, assume that one or more checkboxes are checked having the classname test_check and none checked if returns false.
Hope it helps someone. Thanks :)-

You can do a simple return of the .length here:
function areAnyChecked(formID) {
return !!$('#'+formID+' input[type=checkbox]:checked').length;
}
This look for checkboxes in the given form, sees if any are :checked and returns true if they are (since the length would be 0 otherwise). To make it a bit clearer, here's the non boolean converted version:
function howManyAreChecked(formID) {
return $('#'+formID+' input[type=checkbox]:checked').length;
}
This would return a count of how many were checked.

This is the best way to solve this problem.
if($("#checkbox").is(":checked")){
// Do something here /////
};

Single Choice Dropdown

I am building a form to rank series of items. The user will read the item and select in a dropdown the rating from 1 to 20. All 20 items will be displayed at the same time. What is the best way to make sure that the user didn't select the same number for more than one choice? Then I would display an error message, "You've already ranked an item as number 5"
Thanks

Put the items in a list with options to move an element up or down in the list.

I would suggest something like the following function. You may want to add something to revert the selection to some default value if it is a duplicate.
function checkDupe(element) {
var dupe = false;
$("select").each(function() {
if ($(this).attr("id") != $(element).attr("id") && $(this).attr("value") == $(element).attr("value")) {
dupe = true;
alert("You have already ranked an item number " + $(element).attr("value"));
return;
}
});
return dupe;
}
Just add that to the onchange event for all the dropdown lists like this.
<select id="a1" onchange="checkDupe(this)">
It's important to note that each list must have a unique ID.

There is a jquery plug-in for validation, that can help you define rules. It only works on submit, though but it'll still wont send the form and tell you which entry is wrong. Take a look at it, may be it can help you.