在jQuery中,可以通过以下步骤将复选框的选中ids存储到变量中,并为该变量的值分配一个隐藏字段:
each()
方法遍历所有选中的复选框,并将其值存储到一个数组中。var selectedIds = [];
$('.checkbox-item:checked').each(function() {
selectedIds.push($(this).val());
});
var hiddenField = $('<input>').attr({
type: 'hidden',
name: 'selectedIds',
value: selectedIds.join(',')
});
$('form').append(hiddenField);
完整的代码示例:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<form>
<input type="checkbox" class="checkbox-item" value="1"> Option 1<br>
<input type="checkbox" class="checkbox-item" value="2"> Option 2<br>
<input type="checkbox" class="checkbox-item" value="3"> Option 3<br>
<input type="checkbox" class="checkbox-item" value="4"> Option 4<br>
<button type="button" id="saveBtn">Save</button>
</form>
<script>
$(document).ready(function() {
$('#saveBtn').click(function() {
var selectedIds = [];
$('.checkbox-item:checked').each(function() {
selectedIds.push($(this).val());
});
var hiddenField = $('<input>').attr({
type: 'hidden',
name: 'selectedIds',
value: selectedIds.join(',')
});
$('form').append(hiddenField);
});
});
</script>
</body>
</html>
这样,当用户选中复选框并点击保存按钮时,选中的ids将会存储到隐藏字段中,可以通过表单提交或其他方式将其传递到后端进行处理。
领取专属 10元无门槛券
手把手带您无忧上云