Get all checked checkboxes javascript or jquery

Question

I would like to get dynamically in an array all of the checked checkboxes every time the user clicks on one of them using Jquery or javascript. PS: I'm using Django + Python to generate the options and Bootstrap to style them Here is my code :

{% for option in options %}
    <div class="input-group" style="margin-bottom: 7px;">
        <div class="input-group-prepend">
            <div class="input-group-text">
                <input type="checkbox" name="checks[]" aria-label="Radio button for following text input" id="option_choice" class="ipad_pro" value="{{ option.name }}" onclick="getCheckedCheckboxes('option_choice')">
            </div>
        </div>
        <input style="background-color: #fff;" type="text" class="form-control" disabled=True value="{{ option.name }} {{ option.price }}€" aria-label="Text input with radio button">
    </div>
{% endfor %}

So far, I've tried to do it like this :

function getCheckedBoxes(chkboxId) {
  var checkboxes = document.querySelectorAll('#' + chkboxId);
  var checkboxesChecked = [];
  for (var i=0; i<checkboxes.length; i++) {
     if (checkboxes[i].checked) {
        checkboxesChecked.push(checkboxes[i]);
     }
  }
  return checkboxesChecked.length > 0 ? checkboxesChecked : null;
}
var checkedBoxes = getCheckedBoxes("option_choice");

But that hasn't worked out for me.

Please help me if you know the answer to my problem.

Possible duplicate of Does ID have to be unique in the whole page? — Taplar
– Taplar, Commented Jul 27, 2018 at 21:56
You can get all checked checkboxes using $("[type='checkbox']:checked"). But ids do need to be unique, as pointed above. — tao
– tao, Commented Jul 27, 2018 at 22:03
:checked is also a valid css selector and works with querySelectorAll. jsfiddle.net/0srez4L5/2 — Taplar
– Taplar, Commented Jul 27, 2018 at 22:04
uses self-defined attribute may be one option, like <input data-fantasmo-id="option_choice">, then query like $("[data-fantasmo-id='option_choice']:checked") — Sphinx
– Sphinx, Commented Jul 27, 2018 at 22:04
jsfiddle.net/ozxw0prt/4 Actually this logic works fine. The issue is the inline onclick binding is not the same name as the global method name. @AndreiGheorghiu — Taplar
– Taplar, Commented Jul 27, 2018 at 22:20

Olaf Erlandsen · Accepted Answer · 2018-08-07 17:57:47Z

6

to get all checked checkbox inputs using JS:

var checked = document.querySelectorAll("input[type=checkbox]:checked");

edited Aug 7, 2018 at 17:57

Olaf Erlandsen

6,07611 gold badges48 silver badges78 bronze badges

answered Aug 7, 2018 at 17:41

hcas

1037 bronze badges

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

Comments

Arif · Accepted Answer · 2018-07-27 22:02:36Z

3

Jquery $('input[type=checkbox]:checked')

Using the :checked selector

https://api.jquery.com/checked-selector/

answered Jul 27, 2018 at 22:02

Arif

3182 silver badges8 bronze badges

1 Comment

Fantasmo Clone27 Over a year ago

Worked perfectly! Thanks

Taplar · Accepted Answer · 2018-07-27 22:22:26Z

1

<input type="checkbox" name="checks[]" aria-label="Radio button for following text input" id="option_choice" class="ipad_pro" value="{{ option.name }}"
       onclick="getCheckedCheckboxes('option_choice')">

You are trying to bind a click handler on the getCheckedCheckboxes method, but your function name is getCheckedBoxes, so clicking the element isn't going to run that method.

answered Jul 27, 2018 at 22:22

Taplar

25k4 gold badges24 silver badges36 bronze badges

Collectives™ on Stack Overflow

Get all checked checkboxes javascript or jquery

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related