我有这些复选框:
<input type="checkbox" name="type" value="4" />
<input type="checkbox" name="type" value="3" />
<input type="checkbox" name="type" value="1" />
<input type="checkbox" name="type" value="5" />
等等。它们中大约有6个是手工编码的(即不是从db中获取的)，所以它们可能会在一段时间内保持相同。
我的问题是我如何能得到他们都在一个数组(javascript)，所以我可以使用他们，而使AJAX $。使用Jquery发布请求。
任何想法吗?
编辑:我只希望将选定的复选框添加到数组中
当前回答
如果你想使用一个普通的JS，你可以像@zahid-ullah那样做，但要避免循环:
var values = [].filter.call(document.getElementsByName('fruits[]'), function(c) {
return c.checked;
}).map(function(c) {
return c.value;
});
ES6中的相同代码看起来更好:
var values = [].filter.call(document.getElementsByName('fruits[]'), (c) => c.checked).map(c => c.value);
window.serialize = function serialize() { var values = [].filter.call(document.getElementsByName('fruits[]'), function(c) { return c.checked; }).map(function(c) { return c.value; }); document.getElementById('serialized').innerText = JSON.stringify(values); } label { display: block; } <label> <input type="checkbox" name="fruits[]" value="banana">Banana </label> <label> <input type="checkbox" name="fruits[]" value="apple">Apple </label> <label> <input type="checkbox" name="fruits[]" value="peach">Peach </label> <label> <input type="checkbox" name="fruits[]" value="orange">Orange </label> <label> <input type="checkbox" name="fruits[]" value="strawberry">Strawberry </label> <button onclick="serialize()">Serialize </button> <div id="serialized"> </div>
其他回答
使用Jquery
你只需要添加类到每个输入，我有添加类“源”，你当然可以改变它
<input class="source" type="checkbox" name="type" value="4" />
<input class="source" type="checkbox" name="type" value="3" />
<input class="source" type="checkbox" name="type" value="1" />
<input class="source" type="checkbox" name="type" value="5" />
<script type="text/javascript">
$(document).ready(function() {
var selected_value = []; // initialize empty array
$(".source:checked").each(function(){
selected_value.push($(this).val());
});
console.log(selected_value); //Press F12 to see all selected values
});
</script>
var chk_arr = document.getElementsByName("chkRights[]");
var chklength = chk_arr.length;
for(k=0;k< chklength;k++)
{
chk_arr[k].checked = false;
}
ES6版本:
const values = Array
.from(document.querySelectorAll('input[type="checkbox"]'))
.filter((checkbox) => checkbox.checked)
.map((checkbox) => checkbox.value);
function getCheckedValues() { return Array.from(document.querySelectorAll('input[type="checkbox"]')) .filter((checkbox) => checkbox.checked) .map((checkbox) => checkbox.value); } const resultEl = document.getElementById('result'); document.getElementById('showResult').addEventListener('click', () => { resultEl.innerHTML = getCheckedValues(); }); <input type="checkbox" name="type" value="1" />1 <input type="checkbox" name="type" value="2" />2 <input type="checkbox" name="type" value="3" />3 <input type="checkbox" name="type" value="4" />4 <input type="checkbox" name="type" value="5" />5 <br><br> <button id="showResult">Show checked values</button> <br><br> <div id="result"></div>
var array = []
$("input:checkbox[name=type]:checked").each(function(){
array.push($(this).val());
});
var checked= $('input[name="nameOfCheckbox"]:checked').map(function() {
return this.value;
}).get();
