是指通过使用jQuery库中的选择器和属性操作方法,将具有相同数据属性的复选框的值存储到一个数组中,并将该数组的值放置到唯一的div元素中。
具体实现步骤如下:
.each()
方法遍历每个复选框。.prop("checked")
方法判断复选框是否被选中,如果选中则将其值添加到一个数组中。.join()
方法将数组中的值以逗号分隔合并为一个字符串。.text()
或.html()
方法将合并后的字符串设置为目标div元素的内容。以下是一个示例代码:
<!DOCTYPE html>
<html>
<head>
<title>按数据属性放置到唯一div中的Jquery复选框数组值</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<input type="checkbox" data-checkbox="group" value="1">选项1<br>
<input type="checkbox" data-checkbox="group" value="2">选项2<br>
<input type="checkbox" data-checkbox="group" value="3">选项3<br>
<input type="checkbox" data-checkbox="group" value="4">选项4<br>
<input type="checkbox" data-checkbox="group" value="5">选项5<br>
<div id="result"></div>
<script>
$(document).ready(function() {
var values = [];
$('input[data-checkbox="group"]').each(function() {
if ($(this).prop("checked")) {
values.push($(this).val());
}
});
$('#result').text(values.join(', '));
});
</script>
</body>
</html>
在上述示例中,我们首先给复选框添加了相同的数据属性"data-checkbox",然后使用jQuery选择器$('input[data-checkbox="group"]')
选取所有具有相同数据属性的复选框元素。接着使用.each()
方法遍历每个复选框,并使用.prop("checked")
方法判断复选框是否被选中,如果选中则将其值添加到数组中。最后,使用.join()
方法将数组中的值以逗号分隔合并为一个字符串,并使用.text()
方法将该字符串设置为目标div元素的内容。
这样,当用户选中或取消选中复选框时,div元素中的内容会实时更新为选中的复选框值的数组。
没有搜到相关的沙龙
领取专属 10元无门槛券
手把手带您无忧上云