Check multiple checkbox selection using jquery

Question

I am trying to find the easiest way to get the checkboxes that are selected.

Here's my script:

$(document).ready(function() {
    $("input[name='chkTextEffects']").change(function() {
        if ($("#cbSolid").is(':checked') == true) {
            alert('Solid');
        } else if ($("#cbOutline").is(':checked') == true) {
           alert('Outline');
        } else if ($("#cbSolid", "#cbOutline").is(':checked') == true) {
            alert('SolidOutline');
        } else if ($("#cbSolid", "#cbOutline").is(':checked') == false) {
            alert('No Effects'); 
        }
    });
});

HTML:

   <input type="checkbox" name="chkTextEffects" id="cbSolid" value="Solid" />Solid
   <input type="checkbox" name="chkTextEffects" id="cbOutline" value="Outline" />Outline
   <input id="TextEffectsSelection" type="hidden" />

I'm not sure about this line if ($("#cbSolid", "#cbOutline").is(':checked') == true) or should I use bind to get that worked.

Based on your demo, it looks like you are using checkboxes to mimic radio button behavior. Your if/else if statements seem to confirm that you are only looking for a single selected element. You probably want to use radio buttons instead. — Dan A.
– Dan A., Commented Apr 23, 2012 at 17:37
@DanA-No,I want to get both the elements to be selected and sometimes may be one also.So based on that I need to get the checked one's. — coder
– coder, Commented Apr 23, 2012 at 17:38

T30 · Accepted Answer · 2016-08-23 15:51:18Z

9

Here is an example I created that demonstrates what I think you're attempting to achieve:

$('#getCheckboxesButton').live('click', function(event) {
    var checkboxValues = [];
    $('input[type="checkbox"]:checked').each(function(index, elem) {
        checkboxValues.push($(elem).val());
    });
    alert(checkboxValues.join(', '));
});

http://jsfiddle.net/qdvng/

Let me know if that helps. Its basically using the ':checked' jQuery selector to retrieve checkboxes that are checked, then iterating through their values and printing it out.

edited Aug 23, 2016 at 15:51

T30

12.3k8 gold badges56 silver badges63 bronze badges

answered Apr 23, 2012 at 17:35

SuperPomodoro

4263 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

coder Over a year ago

@SuperPomodoro-Yes,Exactly this is what I need.Cheer :)

SuperPomodoro Over a year ago

Additionally, you can use the :not selector to retrieve the checkboxes that are not checked. jQuery selectors (and new CSS3 pseudo-selectors) allow for elegant DOM querying.

Craig Over a year ago

rhetorical question; but how did you get to the complete solution from this question LOL

coder Over a year ago

@SuperPomodoro-Instead of button Click how could I get on selecting each individual checkbox.

Craig Over a year ago

@coder You've got the answer in your question. $("input[name='chkTextEffects']").change(function() {//do stuff}); Every time one of your checkboxes changes state, a change event is triggered.

|

Craig · Accepted Answer · 2012-04-23 17:31:40Z

4

You can use the :checked selector like this to get all checked checkboxes with the specified name:

$("input[name='chkTextEffects']:checked")

answered Apr 23, 2012 at 17:31

Craig

7,0863 gold badges36 silver badges55 bronze badges

Comments

Sanjay Goswami · Accepted Answer · 2012-04-23 17:37:02Z

1

JQUERY

$('input:checkbox:(:checked)').each( function() {
// your code here
})

http://api.jquery.com/checkbox-selector/

http://www.wiseguysonly.com/2010/01/15/select-and-unselect-all-checkboxes-with-jquery/

answered Apr 23, 2012 at 17:37

Sanjay Goswami

1,3866 silver badges13 bronze badges

Comments

Uchenna Nwanyanwu · Accepted Answer · 2012-04-23 17:31:39Z

0

Why not do this:

$("#checkboxId").attr("checked") == "checked";

answered Apr 23, 2012 at 17:31

Uchenna Nwanyanwu

3,2243 gold badges39 silver badges59 bronze badges

Collectives™ on Stack Overflow

Check multiple checkbox selection using jquery

4 Answers 4

7 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

7 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related