Multiple Checkbox Name - Getting the value of checkebox after it was clicked

Question

I want to get the value of the checkbox after it was clicked using javascript or jquery. Some checkbox was checked, some are not

<input type="checkbox" name="place[]" value="USA" checked>
<input type="checkbox" name="place[]" value="Canada">
<input type="checkbox" name="place[]" value="Japan" checked>
<input type="checkbox" name="place[]" value="Russia">

I want to get the value after the checkbox was clicked, whether it was checked or not.

Sample, If I've clicked : `<input type="checkbox" name="place[]" value="Russia">`
Result: Russia

Sample, If I've clicked : `<input type="checkbox" name="place[]" value="Japan">`
Result: Japan

How can I achieve this using javascript or jquery. Any help is appreciated. Thanks :)

UPDATED

I'm using bootstrap toggle buttons. Using below codes: It doesn't work.

  <link href="https://gitcdn.github.io/bootstrap-toggle/2.2.0/css/bootstrap-toggle.min.css" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://gitcdn.github.io/bootstrap-toggle/2.2.0/js/bootstrap-toggle.min.js"></script>
  <script>
    $('#toggle-two').bootstrapToggle({
      on: 'Enabled',
      off: 'Disabled'
    });
    $('[name="place[]"]').change(function() {
      console.log(this.value)
    })
  </script>
  <input type="checkbox" name="place[]" value="USA" checked data-toggle="toggle" data-size="mini" data-onstyle="primary" data-offstyle="danger" data-on="Enabled" data-off="Disabled">
  <input type="checkbox" name="place[]" value="Canada" data-toggle="toggle" data-size="mini" data-onstyle="primary" data-offstyle="danger" data-on="Enabled" data-off="Disabled">
  <input type="checkbox" name="place[]" value="Japan" checked data-toggle="toggle" data-size="mini" data-onstyle="primary" data-offstyle="danger" data-on="Enabled" data-off="Disabled">
  <input type="checkbox" name="place[]" value="Russia" data-toggle="toggle" data-size="mini" data-onstyle="primary" data-offstyle="danger" data-on="Enabled" data-off="Disabled">

Give same class name to all checkboxes. and get value on click of checkbox — Rahul Pawar, Feb 09 '17 at 11:19

Pranav C Balan · Answer 1 · 2017-02-09T17:50:21.073

Bind a click event handler to listen to the click event.

$('[name="place[]"]').click(function() {
  console.log(this.value)
})

$('[name="place[]"]').click(function() {
  console.log(this.value)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="place[]" value="USA" checked>
<input type="checkbox" name="place[]" value="Canada">
<input type="checkbox" name="place[]" value="Japan" checked>
<input type="checkbox" name="place[]" value="Russia">

UPDATE 1: But it always better to use change event handler to listen to checkbox or radio buttons.

$('[name="place[]"]').change(function() {
  console.log(this.value)
})

$('[name="place[]"]').change(function() {
  console.log(this.value)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="place[]" value="USA" checked>
<input type="checkbox" name="place[]" value="Canada">
<input type="checkbox" name="place[]" value="Japan" checked>
<input type="checkbox" name="place[]" value="Russia">

UPDATE 2: In pure JavaScript :

// for older browser use [].slice.call to convert into array
Array.from(document.querySelectorAll('[name="place[]"]')).forEach(function(ele) {
  // bind cahange event handler
  ele.addEventListener('change', function() {
    console.log(this.value)
  })
});

// for older browser use [].slice.call
Array.from(document.querySelectorAll('[name="place[]"]')).forEach(function(ele) {
  ele.addEventListener('change', function() {
    console.log(this.value)
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="place[]" value="USA" checked>
<input type="checkbox" name="place[]" value="Canada">
<input type="checkbox" name="place[]" value="Japan" checked>
<input type="checkbox" name="place[]" value="Russia">

UPDATE 3: The same code with bootstrapToggle plugin. Your code is failing because you are trying to attach handler before the element is loading, to resolve that use document ready handler or move the script tag after the input elements.

$(document).ready(function() {
  $('#toggle-two').bootstrapToggle({
    on: 'Enabled',
    off: 'Disabled'
  });
  $('[name="place[]"]').change(function() {
    console.log(this.value)
  })
});

<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.0/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.0/js/bootstrap-toggle.min.js"></script>
<input type="checkbox" name="place[]" value="USA" checked data-toggle="toggle" data-size="mini" data-onstyle="primary" data-offstyle="danger" data-on="Enabled" data-off="Disabled">
<input type="checkbox" name="place[]" value="Canada" data-toggle="toggle" data-size="mini" data-onstyle="primary" data-offstyle="danger" data-on="Enabled" data-off="Disabled">
<input type="checkbox" name="place[]" value="Japan" checked data-toggle="toggle" data-size="mini" data-onstyle="primary" data-offstyle="danger" data-on="Enabled" data-off="Disabled">
<input type="checkbox" name="place[]" value="Russia" data-toggle="toggle" data-size="mini" data-onstyle="primary" data-offstyle="danger" data-on="Enabled" data-off="Disabled">

Thanks @Pranav :) – Codeblooded Saiyan Feb 10 '17 at 04:38 — Codeblooded Saiyan, Feb 10 '17 at 04:38

Multiple Checkbox Name - Getting the value of checkebox after it was clicked

1 Answers1