how to get multiple checkbox values from html form

Question

I understand that I can use jQuery (how to get multiple checkbox value using jquery) to get checkbox values when there are multiple, but my checkbox inputs are inside an html form, so those jQuery solutions aren't working because none of them get the checkbox values from within a form.

I try to extract the values from the form, but it just creates a weird radio nodelist that seems to count the number of times the name of the checkboxes appears in the doc rather than the values.

function validateForm() {
  var checks = document.forms["TestForm"]["ParticipantSelection[]"];
  alert(checks);

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>

<form name="TestForm" action="Video1.php" method="post" onsubmit="return validateForm()">

  <table>

    <tr>
      <th><img name="<?php echo $valueindicator[0];?>" src="<?php echo $all_four_images[0];?>" height="100">
      </th>

      <th><img name="<?php echo $valueindicator[1];?>" src="<?php echo $all_four_images[1];?>" height="100">
      </th>
      <th><img name="<?php echo $valueindicator[2];?>" src="<?php echo $all_four_images[2];?>" height="100">
      </th>
    </tr>

    <tr>
      <th> <input type="checkbox" name="ParticipantSelection[]" value="image1">
      </th>

      <th><input type="checkbox" name="ParticipantSelection[]" value="image2">
      </th>

      <th><input type="checkbox" name="ParticipantSelection[]" value="image3">
      </th>
    </tr>


  </table>
  <input type="hidden" name="AnswerCondition" value="BrowserCheckAnswer">


  <button type="submit">Continue</button>

</form>

But I have no idea how to get the js to get the value of whats inside the form inputs instead of counting something else, and no idea how to access the values of the checked boxes

Try using .value on something if you want its value. Similar to how you did document.forms. — takendarkk
– takendarkk, Commented Apr 6, 2017 at 20:37
hi- thanks so much for the reply! I did try this several times- it returns undefined because of the html checkbox name (which is something I need to have to post the data). — S Floyd
– S Floyd, Commented Apr 7, 2017 at 3:22

Teocci · Accepted Answer · 2019-06-20 01:08:02Z

9

You can use jQuery .map() function to iterate through each checked checkbox input type. This will return an object with the selected checkboxes. Now, to get an array from the jQuery object we can use the .get() method like this:

Try this:

var validateForm = function() {
  var checks = $('input[type="checkbox"]:checked').map(function() {
    return $(this).val();
  }).get()
  console.log(checks);
  return false;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="TestForm" action="Video1.php" method="post" onsubmit="return validateForm()">
  <table>
    <tr>
      <th> <input type="checkbox" name="ParticipantSelection[]" value="image1">
      </th>

      <th><input type="checkbox" name="ParticipantSelection[]" value="image2">
      </th>

      <th><input type="checkbox" name="ParticipantSelection[]" value="image3">
      </th>
    </tr>
  </table>
  <input type="hidden" name="AnswerCondition" value="BrowserCheckAnswer"/>
  <button type="submit">Continue</button>
</form>

edited Jun 20, 2019 at 1:08

Teocci

9,3751 gold badge71 silver badges56 bronze badges

answered Apr 6, 2017 at 20:33

Mahesh Singh Chouhan

2,5881 gold badge18 silver badges26 bronze badges

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

3 Comments

Mahesh Singh Chouhan Over a year ago

You can mark this answer as helpful, it is works for you so that it helps others as well. Thanks

S Floyd Over a year ago

hi! it definitely counted the selections, which I am thrilled about! However, checks turns out to be an Object object, but I can just use Object.values(checks) to get it out :) it does return a very weird list though which contains a bunch of stuff besides the checkbox values, making it hard to count what's inside, for example.

Mahesh Singh Chouhan Over a year ago

Updated answer to get selected values array from jQuery object :)

Quentin · Accepted Answer · 2017-04-06 20:29:22Z

1

checks is an array-like object representing all the elements with that name.

Loop over it like an array. Each member will have a value property representing the value and a checked (boolean) property that will tell you if it is checked or not.

answered Apr 6, 2017 at 20:29

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

2 Comments

S Floyd Over a year ago

Hi, thanks for the quick reply! Sorry for not clarifying- I tried this several times before posting. Not sure why it didn't work, but none of the incarnations of this loop I tried worked.

Quentin Over a year ago

@SFloyd — I can't tell why they didn't work either. Try providing a minimal reproducible example

dhruv patel · Accepted Answer · 2022-05-12 10:32:36Z

1

var validateForm = function() {
  var checks = $('input[type="checkbox"]:checked').map(function() {
    return $(this).val();
  }).get()
  console.log(checks);
  return false;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="TestForm" action="Video1.php" method="post" onsubmit="return validateForm()">
  <table>
    <tr>
      <th> <input type="checkbox" name="ParticipantSelection[]" value="yellow">
      </th>

      <th><input type="checkbox" name="ParticipantSelection[]" value="blue">
      </th>

      <th><input type="checkbox" name="ParticipantSelection[]" value="red">
      </th>
    </tr>
  </table>
  <input type="hidden" name="AnswerCondition" value="BrowserCheckAnswer"/>
  <button type="submit">Continue</button>
</form>

answered May 12, 2022 at 10:32

dhruv patel

112 bronze badges

1 Comment

Sagar Darekar Over a year ago

You should explain what your code does, and how it fixed the problem. that would be helpfull.

Collectives™ on Stack Overflow

how to get multiple checkbox values from html form

3 Answers 3

3 Comments

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related