CODEWITHSUNDEEP
javascriptjquerycheckbox
Reza
Reza

Reputation: 523

Get a list of all checked checkboxes

I would like to figure out which checkboxes are checked and so I tried this code:

$('.feature input[type="checkbox"').serialize();

This is how my HTML looks like:

<div class="feature">
  <h2>Features</h2>
  <label><input class="custom_css" checked="" type="checkbox" name="feature[]"> Custom CSS (style.css)</label>
  <label><input class="custom_js" checked="" type="checkbox" name="feature[]"> Custom Javascript (script.js)</label>
  <label><input class="modernizr" type="checkbox" name="feature[]"> Modernizr</label>
  <label><input class="google_maps" type="checkbox" name="feature[]"> Google Maps</label>
  <label><input class="custom_api" type="checkbox" name="feature[]"> Custom API</label>
  <label><input class="font_awesome" type="checkbox" name="feature[]"> Font Awesome</label>
</div>

And this is the output that I get:

array(1) { ["var_sent_via_ajax"]=> string(67) "feature%5B%5D=on&feature%5B%5D=on&feature%5B%5D=on&feature%5B%5D=on" }

Now how can I know which of them has been checked? And what do the signs %5B%5D mean?

Upvotes: 3

Views: 19956

Answers (4)

num8er
num8er

Reputation: 19372

About: %5B %5D
Answer: They are simply raw HTTP encoded values of [ ] (result of serialize function).
When the server parses it, it converts it to [] and sends that to the application which will be treated as an array.

About why you are getting dummy: feature%5B%5D=on&feature%5B%5D=on... string
Answer: You've forgot to give every checkbox a value parameter, then they will be like: feature%5B%5D=custom_css&feature%5B%5D=custom_js...

I've wrote solution.
Take this working example and handle "feature" param of request on server-side app like a string and shrink it by , (php: $features = explode(',', $_POST['features']);

$(function() {
  
  $('#getFeatures').click(function() {
    var features = [];
    $('.feature input[type="checkbox"]:checked').each(function() {
      features.push($(this).val());
    });
    $('#selectedFeatures').html(features.join(','));
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="feature">
  <h2>Features</h2>
  <label><input class="custom_css" checked="" type="checkbox" name="feature[]" value="custom_css"> Custom CSS (style.css)</label>
  <label><input class="custom_js" checked="" type="checkbox" name="feature[]" value="custom_js"> Custom Javascript (script.js)</label>
  <label><input class="modernizr" type="checkbox" name="feature[]" value="modernizr"> Modernizr</label>
  <label><input class="google_maps" type="checkbox" name="feature[]" value="google_maps"> Google Maps</label>
  <label><input class="custom_api" type="checkbox" name="feature[]" value="custom_api"> Custom API</label>
  <label><input class="font_awesome" type="checkbox" name="feature[]" value="font_awesome"> Font Awesome</label>
</div>

<button id="getFeatures">GET FEATURES</button>
<div id="selectedFeatures"></div>

Upvotes: 5

Vineesh P A
Vineesh P A

Reputation: 11

You can get the answer by following example:

$('input[name="feature"]:checked').each(function() {
   console.log(this.value);
});

Upvotes: 0

danielarend
danielarend

Reputation: 1427

you can get them by name and then check one by one

    var elems= document.querySelectorAll('[name=feature[]')
                for (var i=0;i<elems.length;i++)
                {
                    var isChecked =elems[i].checked;
                    console.log(isChecked);
                }

Upvotes: 0

Jorrex
Jorrex

Reputation: 1500

$(".feature input[type='checkbox']:checked").length;

This will give you the amount of checked checkboxes.

$(".feature input[type='checkbox']:checked")

This will give you the checked checkboxes (objects)

Upvotes: 2

Related Questions