jquery实现多图片选中checkbox效果

可以使用jQuery遍历所有的图片，为每张图片添加一个复选框。然后监听复选框的选中状态，每当有复选框被选中时，获取该复选框对应的图片的src属性，并将其添加到一个数组中保存。同时，可以为选中的图片添加一个选中状态的样式，方便用户识别。当用户点击提交按钮时，将保存选中图片的数组作为参数传递给后台进行处理。

jquery实现多图片选中checkbox效果

可以通过监听checkbox的click事件，然后在事件处理函数里获取checkbox的状态（是否选中），结合jQuery的选择器，来找到对应的图片元素，并给它添加选中效果（比如高亮、加边框等）。

如果要支持多选，则需要维护一个选中的图片集合，可以使用数组、Set等数据结构来存储。同时，需要在处理checkbox状态时，更新这个集合并修改对应图片的选中状态。

最后，可以根据选中集合里的图片元素来进行统一的批量操作。

jquery实现多图片选中checkbox效果

JQuery实现多图片选中Checkbox效果非常方便。
1.JQuery可以用来实现多图片选中Checkbox效果。
2.可以通过JQuery中的each()方法来遍历所有的图片，获取到每个图片选中状态的属性值，然后通过设置Checkbox的属性值来实现选中效果。
3.除了JQuery，也可以使用原生JavaScript来实现，并且基于前端框架（如Vue、React等）的组件里面都有实现多图片选中的相关功能，可以根据项目需求进行选择。

jquery实现多图片选中checkbox效果

$(document).ready(function() {

$(".img").click(function() {

if($(".checkbox").prop("checked")) {//先判断该checkbox是否已经被先中。

$(".checkbox").attr("checked","");

$(this).removeClass("check");//".check"这个是图片被激活后的样式。即该被点击的图片有两个状态，一个是正常，另一个是被激活后，写在两个样式里。

} else {

$(".checkbox").attr("checked","checked");

$(this).addClass("check");

}

})

})

JQuery记得用1.6后的版本。

.img 这个是被点击图片的样式

.check 这个是图片被点击过后的样式

.checkbox 这是那个checkbox的样式