ansaurus

Question

JavaScript: How to detect if an HTML checkbox was selected?

Answer 1

A:

Assign names and/or IDs to your checkbox elements so that you can distinguish them in code. Then, using jQuery, add events with bind if you want to handle the check/uncheck state changes.

Steve Madsen 2009-11-03 17:00:22

Answer 2

A:

Use IDs on your checkbox.

<FORM ACTION="...">
<INPUT TYPE=CHECKBOX id="c1" VALUE="1">1 bedroom<BR>
<INPUT TYPE=CHECKBOX id="c2" VALUE="2">2 bedrooms<BR>
<INPUT TYPE=CHECKBOX id="c3" VALUE="3">3 bedrooms<BR>
<INPUT TYPE=CHECKBOX id="c4" VALUE="4+">4+ bedrooms<P>
</FORM>



$('c1').checked // returns whether the 1 bedroom checkbox is true or false

yuku 2009-11-03 17:00:40

$('c1').checked is a check to see if it has been selected. I need an Event to fire to inform me that the check box has been selected. How do I create the event to fire if the check box has been selected?

HankH 2009-11-03 17:03:26

Answer 3

+1 A:

1) Use the onclick attribute.
2) You could give them each the same name and use $('input[name=yourname]:checked') to get them all.

[Edit] as requested, here's an SSCCE.

<!doctype html>
<html>
    <head>
        <script src="jquery.js"></script>
        <script>
            $(document).ready(init);

            function init() {
                // Add onclick function to every checkbox with name "bedrooms".
                $('input[name=bedrooms]').click(showCheckedValues);
            }

            function showCheckedValues() {
                // Gather all values of checked checkboxes with name "bedrooms".
                var checked = $('input[name=bedrooms]:checked').map(function() {
                    return this.value;
                }).get();
                alert(checked);
            }
        </script>
    </head>
    <body>
        <form>
            <input type="checkbox" name="bedrooms" value="1">1 bedroom<br>
            <input type="checkbox" name="bedrooms" value="2">2 bedroom<br>
            <input type="checkbox" name="bedrooms" value="3">3 bedroom<br>
            <input type="checkbox" name="bedrooms" value="4+">4+ bedroom<br>
        </form>
    </body>
</html>

BalusC 2009-11-03 17:01:51

@BalusC, would you mind elaborating some by showing some code. I'm very excited at your response but am a little unclear exactly how it would work.

HankH 2009-11-03 17:04:39

No problem, added an SSCCE.

BalusC 2009-11-03 17:10:55

Funny, syntax highlighting went mad in the 2nd <script> and I can't figure how that's been caused.

BalusC 2009-11-03 17:21:53

what happen if the <input type="checkbox" name...> is generated dynamically. So when document.ready() fire up, it cant register the click event to the checkbox since the checkbox is not there yet. How can we solve this problem?

Harry Pham 2010-03-10 23:43:52

@Harry Pham: replace `jQueryElement.click(function ...)` by `jQueryElement.live('click', function ...)`. API doc: http://api.jquery.com/live/

BalusC 2010-03-10 23:45:09

you are the best :)

Harry Pham 2010-03-10 23:46:52

Answer 4

A:

You can use the .checked property on a checkbox to retrieve whether a checkbox has been checked. To fire an event when a checkbox is checked, you can use the click event in jquery. Something like the below would work to list all checkboxes on the page that have been checked.

$("input[type='checkbox']").click(function() {
    // if you want information about the specific checkbox that was clicked        
    alert("checkbox name : " + $(this).name + " | checked : " + $(this).checked);

    // if you want to do something with ALL the checkboxes on click. 
    $.each($["input[type='checkbox']", function(i, checkEl) {
       // put any of your code to do something with the checkboxes here.
       alert("checkbox name : " + checkEl.name + " | checked : " + checkEl.checked);
    });
});

Ryan Brunner 2009-11-03 17:03:08

Answer 5

A:

You can use events to see if a checkbox was selected (onChange). You can read more about it at the Essential Javascript tutorial (see the section entitled: Javascript is an Event Driven Language)

JasCav 2009-11-03 17:03:42

Answer 6

+7 A:

jQuery to the rescue! (since you tagged it as such):

$('input:checkbox[name=bedrooms]').click(function() {
  var values = $('input:checkbox[name=bedrooms]:checked').map(function() {
    return this.value
  }).get();

  // do something with values array
})

(make sure to add a name="bedrooms" attribute in the html for your checkboxes; you'll need them when submitting the form anyway, in order to retrieve them on the server).

I've used a few pseudo-selectors:

"input:checkbox" finds all the input checkboxes on the page
"[name=bedrooms]" finds all the elements with attribute name="bedrooms"
":checked" finds all the elements with attribute checked=true

Combine them as "input:checkbox[name=bedrooms]:checked" and jQuery gives you all the checked checkboxes.

For each one I pluck out their value attribute into an array you can simply iterate over and do what you wish.

Edit

You can optimize this code to save a reference to your checkboxes instead of telling jQuery to go fetch them all everytime there's a click:

var $checkboxes = $('input:checkbox[name=bedrooms]');
$checkboxes.click(function() {
  var values = $checkboxes
    .filter(function() { return this.checked })
    .map(function() { return this.value })
    .get();

  // do something with values array
})

In this sample I've saved the checkboxes into var $checkboxes. On click of any checkbox, instead of going back to the DOM to grab the checked ones, we simply filter $checkboxes down to only the checkboxes that are checked, and for each one pluck out the value attribute into an array. The get() is just an obscure requirement to convert the "jQueryized" array to a regular JavaScript Array.

Crescent Fresh 2009-11-03 17:05:32

Pitfall is that it would collect EVERY checkbox in your document. What if he has more checkboxes than only for bedrooms?

BalusC 2009-11-03 17:13:03

Oh, the get(0) only returns 1st element of the map .. Not the raw array.

BalusC 2009-11-03 17:24:48

@BalusC: "He" has provided an example of a bunch of checkboxes in a form. That's what the answer is tailored to. If "he" had specific css `class`es, `name`s, or a container then it would have been remiss to exclude them.

Crescent Fresh 2009-11-03 17:25:12

@BalusC: yep, good catch!

Crescent Fresh 2009-11-03 17:25:45

+1 for your map() idea though.

BalusC 2009-11-03 17:28:49

@BalusC: on second thought, what good is a checkbox without a `name` attribute? Answer updated.

Crescent Fresh 2009-11-03 17:40:11

Answer 7

A:

If you do not want to use JQuery you could always use

document.GetElementById("cbxCheckbox1");

GaryDevenay 2009-11-03 17:30:32

ansaurus

tags:

views:

answers:

JavaScript: How to detect if an HTML checkbox was selected?

related questions