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

你的代码中只有一个拼写错误：这个：

 return +e.value;

必须是

 return e.value;

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

Answer 2

只需在地图功能中返回e.value即可。

＆＃13;

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);

＆＃13;

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

＆＃13;

Answer 3

问题在于：return +e.value;

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

＆＃13;

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);

＆＃13;

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

＆＃13;

Answer 4

hier是一个可以帮助你的例子

$(':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 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>

从复选框中获取多个值

5 个答案: