我有这些复选框:
<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发布请求。
任何想法吗?
编辑:我只希望将选定的复选框添加到数组中
当前回答
使用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>
其他回答
我没有测试它，但它应该工作
<script type="text/javascript">
var selected = new Array();
$(document).ready(function() {
$("input:checkbox[name=type]:checked").each(function() {
selected.push($(this).val());
});
});
</script>
这是一个老问题，但在2022年有一个更好的方法来实现它使用香草JS
我们不需要react或者花哨的框架。
我们只需要处理两个这样的onchange事件:
const types = [{id:1, name:'1'}, {id:2, name:'2'}, {id:3, name:'3'}, {id:4, name:'4'}, {id:5, name:'5'}, {id:6, name:'6'}] const all = document.getElementById('select-all') const summary = document.querySelector('p') let selected = new Set() const onCheck = event => { event.target.checked ? selected.add(event.target.value) : selected.delete(event.target.value) summary.textContent = `[${[...selected].join(', ')} | size: ${selected.size}] types selected.` all.checked = selected.size === types.length } const createCBInput = t => { const ol = document.querySelector('ol') const li = document.createElement('li') const input = document.createElement('input') input.type = 'checkbox' input.id = t.id input.name = 'type' input.value = t.id input.checked = selected.has(t.id) input.onchange = onCheck const label = document.createElement('label') label.htmlFor = t.id label.textContent = t.name li.append(input, label) ol.appendChild(li) } const onSelectAll = event => { const checked = event.target.checked for (const t of types) { const cb = document.getElementById(t.id) cb.checked = checked ? true : selected.has(t.id) const event = new Event('change') cb.dispatchEvent(event) } } all.checked = selected.size === types.length all.onchange = onSelectAll for (const t of types) { createCBInput(t) } ol { list-style-type: none; padding-left: 0; } <ol> <li> <input type="checkbox" id="select-all"> <label for="select-all"><strong>Select all</strong></label> </li> </ol> <p></p>
使用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>
这应该可以达到目的:
$('input:checked');
我不认为你有其他可以检查的元素，但如果你有，你必须让它更具体:
$('input:checkbox:checked');
$('input:checkbox').filter(':checked');
按输入名称选择复选框
var category_id = [];
$.each($("input[name='yourClass[]']:checked"), function(){
category_id.push($(this).val());
});
