从复选框中获取多个值

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

票数有一个例子可以帮助你

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

没有简单地在你的代码一个错字：此：

return +e.value; 

必须

return e.value; 

前缀+只是为数字定义的，所以javascript会尝试将“Teamsport”转换为数字 - 即NaN（不是数字）

Answer 3

只需在地图函数中返回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 4

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

+e.value将返回NaN的非数值，在这种情况下，字符串将被转换为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 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>