Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Loop through checkboxes and count each one checked or unchecked

I've run into a bit of an issue. Here's a brief explanation.

I have 12 check boxes on a standard form. What I need to do is loop through each of them and learn which ones are checked and which ones are unchecked.

Using this, I can then build a string which I then enter into a database field. Here is an example.

(Check1 - checked)
(Check2 - not checked)
(Check3 - checked)

1,0,1

So far, I've got this bit of code.

$('input[type=checkbox]').each(function () {            if (this.checked) {                console.log($(this).val());             } }); 

It works perfectly except that it only brings back the checked ones, not all.

like image 997
Richard M Avatar asked Dec 27 '09 03:12

Richard M


People also ask

What is the value of checkbox when unchecked?

Note: If a checkbox is unchecked when its form is submitted, there is no value submitted to the server to represent its unchecked state (e.g. value=unchecked ); the value is not submitted to the server at all.

What is checked in checkbox?

The checked attribute is a boolean attribute. When present, it specifies that an <input> element should be pre-selected (checked) when the page loads. The checked attribute can be used with <input type="checkbox"> and <input type="radio"> . The checked attribute can also be set after the page load, with a JavaScript.

How do you checked multiple checkbox in jQuery?

To get an array of selected checkboxes values we need to use jQuery each() method and :checked selector on a group of checkboxes. The each() method will loop over the checkboxes group in which we can filter out selected checkboxes using :checked selector.


2 Answers

To build a result string exactly in the format you show, you can use this:

var sList = ""; $('input[type=checkbox]').each(function () {     sList += "(" + $(this).val() + "-" + (this.checked ? "checked" : "not checked") + ")"; }); console.log (sList); 

However, I would agree with @SLaks, I think you should re-consider the structure into which you will store this in your database.

EDIT: Sorry, I mis-read the output format you were looking for. Here is an update:

var sList = ""; $('input[type=checkbox]').each(function () {     var sThisVal = (this.checked ? "1" : "0");     sList += (sList=="" ? sThisVal : "," + sThisVal); }); console.log (sList); 
like image 117
Ed Schembor Avatar answered Oct 05 '22 01:10

Ed Schembor


Using Selectors

You can get all checked checkboxes like this:

var boxes = $(":checkbox:checked"); 

And all non-checked like this:

var nboxes = $(":checkbox:not(:checked)"); 

You could merely cycle through either one of these collections, and store those names. If anything is absent, you know it either was or wasn't checked. In PHP, if you had an array of names which were checked, you could simply do an in_array() request to know whether or not any particular box should be checked at a later date.

Serialize

jQuery also has a serialize method that will maintain the state of your form controls. For instance, the example provided on jQuery's website follows:

single=Single2&multiple=Multiple&multiple=Multiple3&check=check2&radio=radio2 

This will enable you to keep the information for which elements were checked as well.

like image 40
Sampson Avatar answered Oct 05 '22 01:10

Sampson