從複選框中獲取多個值

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>