jquery实现多图片选中checkbox效果

JavaScript09

jquery实现多图片选中checkbox效果,第1张

$(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的样式

将图片选中 是为了获取图片的src地址 传给后台吧

图片不像表单那样 可以选中然后直接读值 所以我们要换个思路来实现

首先添加个css样式 当图片被点击后 给他换上这个样式 可以显示出来“被选中”的状态 然后用js来读取src地址就可以

我习惯用jquery 帮你这个大概的

$("img").on("click",function(e){

$(this).toggleClass("on")//切换样式

if($(this).hasClasd("on")){

//如果有on样式表示被选中

var picsrc=$(this).prop("src")

//上面这句就获取到了选中图片的src地址

//接着可以做你想要的操作

}

})

希望能帮助到你!

使用一个隐藏域<input type="hidden" value="" id="picid">再写个JS函数:function getpicid(id){ document.getElementById("picid").value=id}在每个图片上加上动作onclick="getpicid(不同图片的id)"图片的id可以是编号,图片地址等。在提交到的页中读取picid的值即可。 如果不用js也可以在每张图片前放单选按钮Name属性相同,value分别为不同图片的id或地址。如:<input type="radio" name="picid" value="图片1id或地址" /><input type="radio" name="picid" value="图片2id或地址" /><input type="radio" name="picid" value="图片3id或地址" />.....点击单后选提交,由于单选按钮只传递一个值,提交后获取picid值即可。