使用 JavaScript / JQuery 从上次选择中获取复选框值

Question

我有一组复选框，可以进行多次检查。我想通过最后一个 selected 获得值。例如，考虑 4 个值为 1、2、3、4 的复选框。如果我 select 4、2、1 我需要值 [4,2,1] 因为我 selected 而不是得到 [ 1,2,4]

这是我的 html 代码片段

<li><input type="checkbox" class="checkGroup" value="1"></li>
<li><input type="checkbox" class="checkGroup" value="2"></li>
<li><input type="checkbox" class="checkGroup" value="3"></li>
<li><input type="checkbox" class="checkGroup" value="4"></li>

下面的代码是我的 JQuery 脚本，用于获取数组

中的值

var arr = $.map($('.checkGroup:checked'), function(e, i) {                
                value = e.value;
                return value;
            });

请帮我解决这个问题。

Answer 1

一种方法是在更新状态时存储数组值，例如

var arr = [];
$('.checkGroup').change(function() {
  if (this.checked) {
    arr.unshift(this.value)
  } else {
    arr.splice(arr.indexOf(this.value), 1);
  }
});

$('button').click(function() {
  snippet.log(arr.join(', '))
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>
<ul>
  <li><input type="checkbox" class="checkGroup" value="1"></li>
  <li><input type="checkbox" class="checkGroup" value="2"></li>
  <li><input type="checkbox" class="checkGroup" value="3"></li>
  <li><input type="checkbox" class="checkGroup" value="4"></li>
</ul>
<button>Print</button>

Answer 2

试试这个：

var selectedArr = [];
var dataElem = $('#data');
$('.checkGroup').on('change', function() {
  if (this.checked) {
    selectedArr.push(this.value);
  } else {
    selectedArr.splice(selectedArr.indexOf(this.value), 1);
  }

  dataElem.html(JSON.stringify(selectedArr));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="data"></div>
<li>
  <input type="checkbox" class="checkGroup" value="1">
</li>
<li>
  <input type="checkbox" class="checkGroup" value="2">
</li>
<li>
  <input type="checkbox" class="checkGroup" value="3">
</li>
<li>
  <input type="checkbox" class="checkGroup" value="4">
</li>

使用 JavaScript / JQuery 从上次选择中获取复选框值

Getting the checkbox values from Last selected using JavaScript / JQuery

html

javascript

checkbox

jquery

jquery-events