Question

我有一组允许多次检查的复选框。我想通过最后选择的值获取值。例如，考虑4个复选框，值为1,2,3,4。如果我选择4,2,1我需要值[4,2,1]，因为我选择而不是得到[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 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>

Answer 2

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

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>

使用JavaScript / JQuery从Last selected中获取复选框值

2 个答案: