CODEWITHSUNDEEP
javascriptjqueryhtmlcheckbox
Fil
Fil

Reputation: 8873

How to get the value of the checked boxes in jquery

I have a following code in html, which use checkbox align as a row

<tr class="reg_name">
  <th class="custom-th">Reg. Name</th>
  <td class="text-center"><input type="checkbox" name="reg_name[]" value="Y:1"></td>
  <td class="text-center"><input type="checkbox" name="reg_name[]" value="N:1"></td>
  <td class="text-center"><input type="checkbox" name="reg_name[]" value="B:1"></td>
  <td class="text-center"><input type="checkbox" name="reg_name[]" value="I:1"></td>
</tr>

with a button

<button type="button" class="purchase__save btn btn-default pull-right">Save</button>

and this js code,

$(document).ready(function() {
  $('.purchase__save').click(function() {
    var box_array = [];
    var boxes = $('.reg_name input[name="reg_name[]"]:checked');
    for (var i = 0; i < boxes.length; i++) {
      box_array[i] = boxes.val();
    }
    console.log(box_array);
  });
});

will try to get the value of checked box.

The problem, if try to check two checkboxes at the same time, the value from this <td class="text-center"><input type="checkbox" name="reg_name[0]" value="Y:1"></td> is the only thing I get.

How to get values of other checkboxes if they are checked?

Upvotes: 2

Views: 286

Answers (7)

guradio
guradio

Reputation: 15565

$(document).ready(function() {
  $('.purchase__save').click(function() {
    var box_array = [];
    var boxes = $('input:checkbox:checked');
    $.each(boxes, function(i,v) {
      box_array[i] = $(this).val();


    })

    console.log(box_array);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr class="reg_name">
    <td class="text-center">
      <input type="checkbox" name="reg_name" value="Y:1">
    </td>
    <td class="text-center">
      <input type="checkbox" name="reg_name" value="N:1">
    </td>
    <td class="text-center">
      <input type="checkbox" name="reg_name" value="B:1">
    </td>
    <td class="text-center">
      <input type="checkbox" name="reg_name" value="I:1">
    </td>
  </tr>
</table>

<button type="button" class="purchase__save btn btn-default pull-right">Save</button>

  1. Use $(this) to get current checkbox value

Upvotes: 2

Marko Adam
Marko Adam

Reputation: 107

JavaScript:

$(document).ready(function() {
  $('.purchase__save').click(function() {
    var box_array = [];
    var i = 0;
    var boxes = $('.checkedIn:checked');
    console.log(boxes);
    $(boxes).each(function(){
        box_array[i] = this.value;
      i++;
    });
    console.log(box_array);
  });
});

HTML:

<tr class="reg_name">
  <th class="custom-th">Reg. Name</th>
  <td class="text-center"><input type="checkbox" class="checkedIn" name="reg_name[]" value="Y:1"></td>
  <td class="text-center"><input type="checkbox" class="checkedIn" name="reg_name[]" value="N:1"></td>
  <td class="text-center"><input type="checkbox" class="checkedIn" name="reg_name[]" value="B:1"></td>
  <td class="text-center"><input type="checkbox" class="checkedIn" name="reg_name[]" value="I:1"></td>
</tr>
<button type="button" class="purchase__save btn btn-default pull-right">Save</button>

Upvotes: 1

Alessio Cantarella
Alessio Cantarella

Reputation: 5211

Just cycle every checked input with jQuery each function, then append the item with JavaScript push function.

$(function() {
  $(".purchase__save").click(function() {
    var box_array = [];
    $(".reg_name input[name='reg_name[]']:checked").each(function(i, v) {
      box_array.push($(v).val());
    });
    console.log(box_array);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr class="reg_name">
    <th class="custom-th">Reg. Name</th>
    <td class="text-center">
      <input type="checkbox" name="reg_name[]" value="Y:1">
    </td>
    <td class="text-center">
      <input type="checkbox" name="reg_name[]" value="N:1">
    </td>
    <td class="text-center">
      <input type="checkbox" name="reg_name[]" value="B:1">
    </td>
    <td class="text-center">
      <input type="checkbox" name="reg_name[]" value="I:1">
    </td>
  </tr>
</table>
<button type="button" class="purchase__save btn btn-default pull-right">Save</button>

Upvotes: 2

Rohit Chahar
Rohit Chahar

Reputation: 128

Working Example 

<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<script>
$(document).ready(function() {
  $('.purchase__save').click(function() {
    var box_array = [];
    $("input:checkbox[name=reg_name]:checked").each(function(){
    box_array.push($(this).val());
    });
    console.log(box_array);
  });
});
</script>
</head>
<body>
<tr class="reg_name">
  <th class="custom-th">Reg. Name</th>
  <td class="text-center"><input type="checkbox" name="reg_name" value="Y:1"></td>
  <td class="text-center"><input type="checkbox" name="reg_name" value="N:1"></td>
  <td class="text-center"><input type="checkbox" name="reg_name" value="B:1"></td>
  <td class="text-center"><input type="checkbox" name="reg_name" value="I:1"></td>
</tr>
<button type="button" class="purchase__save btn btn-default pull-right">Save</button>
</body>
</html>

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337713

The issue is because you're accessing the val() of a collection of elements, this means it will only retrieve the value of the first element in the set.

You could improve this code by using map() to build the array instead:

$('.purchase__save').click(function() {
    var box_array = $('.reg_name input[name="reg_name[]"]:checked').map(function() {
        return this.value;
    }).get();

    // use the array as required here...
});

Working example

Upvotes: 2

Leolian
Leolian

Reputation: 200

Because you do not have id or name specified for your inputs you need to access them from different way.

$.('.text-center > input:checked')

This should do the trick. Your searching all items with class "text-center" and theirs direct input childs with checked selector

EDIT This will return JQuery object and notice Jamiec answer!

Upvotes: -3

Jamiec
Jamiec

Reputation: 136249

you're looping over your boxes result, but only reading the first one.

for (var i = 0; i < boxes.length; i++) {
  box_array[i] = boxes.val();
}

In the above boxes is a jquery object with 0 or more items, but boxes.val() will just read the value of the first one.

$('.purchase__save').click(function() {
    var box_array = $('.reg_name input[name="reg_name[]"]:checked').map(function(){
      return $(this).val();
    }).get();
    
    console.log(box_array);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr class="reg_name">
  <th class="custom-th">Reg. Name</th>
  <td class="text-center"><input type="checkbox" name="reg_name[]" value="Y:1"></td>
  <td class="text-center"><input type="checkbox" name="reg_name[]" value="N:1"></td>
  <td class="text-center"><input type="checkbox" name="reg_name[]" value="B:1"></td>
  <td class="text-center"><input type="checkbox" name="reg_name[]" value="I:1"></td>
</tr>
  </table>

<button type="button" class="purchase__save btn btn-default pull-right">Save</button>

Upvotes: 0

Related Questions