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

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

1 个答案: