Get checkbox value even if not checked?

Question

Is there a way to get the values of all checkboxes, even if they are not checked?

HTML:

<input type="checkbox" name="color[]" value="1"/>
<input type="checkbox" name="color[]" value="2"/>
...

JS:

$("input[name='color[]']").serialize();

Something like the above, but I want the values even if they are not checked. Perhaps I need to put them into an array first before serialising?

If the all checkbox is clicked, I'll want all values, even if they are not ticked. — panthro
– panthro, Commented Jun 16, 2015 at 14:37
@panthro, see my updated answer which avoids changing the original state of the checkbox — AmmarCSE
– AmmarCSE, Commented Jun 16, 2015 at 14:37

T.J. Crowder · Accepted Answer · 2015-06-16 14:43:19Z

2

The simple solution seems to be missing, so:

var serializedValues = $('input[name="color[]"]').map(function(i, e) {
  return encodeURIComponent(e.name) + "=" + encodeURIComponent(e.value);
}).get().join("&");
snippet.log(serializedValues);

<input type="checkbox" name="color[]" value="1" />
<input type="checkbox" name="color[]" value="2" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

That's assuming you really want the same output that seralize would give you.

answered Jun 16, 2015 at 14:43

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

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

2 Comments

AmmarCSE Over a year ago

Im sorry, simple? You are doing it by hand! :) Now, better performance, yes, absolutley

T.J. Crowder Over a year ago

@AmmarCSE: What, that's not simple? ;-) (Yeah, that was kinda overselling it...)

AmmarCSE · Accepted Answer · 2015-06-16 14:42:24Z

2

Clone them to avoid altering the original state of the checkboxes
Set the cloned items checked to true
Serialize

document.write($('input[name="color[]"]').clone().prop('checked', true).serialize());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<input type="checkbox" name="color[]" value="1" />
<input type="checkbox" name="color[]" value="2" />

edited Jun 16, 2015 at 14:42

answered Jun 16, 2015 at 14:30

AmmarCSE

30.7k6 gold badges48 silver badges53 bronze badges

3 Comments

NCA Over a year ago

dont ever use document.write.

AmmarCSE Over a year ago

@NCA, I only use for demo purposes so readers dont have to open the console or get an annoying alert

T.J. Crowder Over a year ago

@NCA: Would be nice if they would ever get around to implementing this snippets feature, wouldn't it? Then people wouldn't have cause to use document.write in answers...

Collectives™ on Stack Overflow

Get checkbox value even if not checked?

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related