多个复选框名称 - 单击后获取复选框的值

Question

我想在使用 javascript 或 jquery 单击复选框后获取该复选框的值。一些复选框被选中，一些没有被选中

<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">

我想获取复选框被点击后的值，不管它是否被选中。

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

如何使用 javascript 或 jquery 来实现这一点。 任何帮助表示赞赏。谢谢:)

更新

我正在使用引导切换按钮。 使用以下代码：它不起作用。

  <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">        

Answer 1

绑定一个点击事件处理器来监听点击事件。

$('[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">

更新 1：但最好使用更改事件处理程序来监听复选框或单选按钮。

$('[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">

---

更新 2： 在纯 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">

---

更新 3： 与 bootstrapToggle 插件相同的代码。您的代码失败，因为您试图在加载元素之前附加处理程序，以解决使用 document ready handler 或在输入元素之后移动脚本标记。

$(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">