从复选框中获取多个值[重复]

Question

我在互联网上进行了很多搜索，但仍然找不到我的问题的正确答案。我正在尝试从我的 html 页面上的多个复选框中“打印”所有选定的值。但是，这仅适用于整数，不适用于其他值。现在，我习惯使用以下代码：

<div>
<input type="checkbox" name="options[]" value="1" />
<input type="checkbox" name="options[]" value="2" />
</div>
<div>
<input type="checkbox" name="options[]" value="2" />
<input type="checkbox" name="options[]" value="4" />
<input type="checkbox" name="options[]" value="5" />
</div>
<span></span>

结合以下jquery代码：

function calculate() {
var arr = $.map($('input:checkbox:checked'), function(e, i) {
    return +e.value;
});
$('span').text('the checked values are: ' + arr.join(','));
}

calculate();
$('div').delegate('input:checkbox', 'click', calculate);

现在的问题是，我想查看复选框中的所有值，但是，我不希望它们是整数，但它们应该具有如下值：

<div>
<input type="checkbox" name="options[]" value="Teamsport" />
<input type="checkbox" name="options[]" value="Individual sport" />
</div>

这样就会有如下输出： the selected values are: Teamsport,Ballsport,etc..

我认为问题应该出在Jquery代码上，但是我对javascript和jquery不是很熟悉，所以希望有人能帮助我。

Answer 1

您的代码中只是一个错字：this：

 return +e.value;

必须

 return e.value;

前缀 + 只为数字定义，因此 javascript 尝试将“Teamsport”转换为数字 - 这是 NaN（不是数字）

Answer 2

他是一个例子，可以帮助你

$(':checkbox').change(function(){
    var liste2 = $(':checkbox:checked').map(function() {
    return this.value;
}).get();
   $('span').text('the checked values are: ' + liste2);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
   <input type="checkbox" name="options[]" value="1" />
   <input type="checkbox" name="options[]" value="2" />
</div>
<div>
   <input type="checkbox" name="options[]" value="3" />
   <input type="checkbox" name="options[]" value="4" />
   <input type="checkbox" name="options[]" value="5" />
</div>
<span></span>

Answer 3

问题出在这里：return +e.value;

+e.value 将返回非数字值的 NaN，在这种情况下，String 将被转换为 NaN

function calculate() {
  var arr = $.map($('input:checkbox:checked'), function(e, i) {
    return e.value; // +e.value will return NaN for String and non number values
  });
  $('span').text('the checked values are: ' + arr.join(','));
}

calculate();
$('div').delegate('input:checkbox', 'click', calculate);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input type="checkbox" name="options[]" value="abc" />
  <input type="checkbox" name="options[]" value="pqr" />
</div>
<div>
  <input type="checkbox" name="options[]" value="xyz" />
  <input type="checkbox" name="options[]" value="lmn" />
  <input type="checkbox" name="options[]" value="ccc" />
</div>
<span></span>

Answer 4

只需在您的地图函数中返回e.value。

function calculate() {
  var arr = $.map($('input[type="checkbox"]:checked'), function(e, i) {
    return e.value;
  });
  $('span').text('the checked values are: ' + arr.join(','));
  // console.log('the checked values are: ' + arr.join(','))
}

calculate();
$('div').on('click', 'input:checkbox', calculate);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
  <input type="checkbox" name="options[]" value="Teamsport" />
  <input type="checkbox" name="options[]" value="Individual sport" />
</div>

<span></span>

Answer 5

function calculate() {
var arr =[];
$('input:checkbox:checked').each(function() {
    arr.push($(this).val());
});
$('span').text('the checked values are: ' + arr.join(','));
}

calculate();
$('div').delegate('input:checkbox', 'click', calculate);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


<div>
<input type="checkbox" name="options[]" value="1" />
<input type="checkbox" name="options[]" value="2" />
</div>
<div>
<input type="checkbox" name="options[]" value="2" />
<input type="checkbox" name="options[]" value="4" />
<input type="checkbox" name="options[]" value="5" />
</div>
<div>
<input type="checkbox" name="options[]" value="Teamsport" />
<input type="checkbox" name="options[]" value="Individual sport" />
</div>
<span></span>