用JQuery写的图片上加CheckBox

最新推荐文章于 2021-07-21 16:19:20 发布

iteye_13651

最新推荐文章于 2021-07-21 16:19:20 发布

阅读量386

点赞数

分类专栏： JQuery 文章标签： jQuery JavaScript XHTML CSS HTML ViewUI

JQuery 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一个使用jQuery实现的图片展示页面，该页面包括了图片预览、选中状态标记及获取选中图片ID的功能。通过鼠标悬停效果切换图片状态，并在点击时打开指定链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

<script language="javascript" src="jquery-1.2.6.min.js" type="text/javascript"></script>

<script language="javascript" type="text/javascript">

  $(document).ready(function(){

   //进入后将checkbox全部设为未选中,防止刷新后还有选中的现象
   $('.photoBox .imageover .photoCheck').attr("checked",false);

   $('.photoBox').mouseover(function(){
    $(this).children('.imagestate').hide();
    $(this).children('.imageover').show();
    $(this).children('.imagevisited').hide();
   });

   $('.photoBox').mouseout(function(){

    if($(this).children().children('.photoCheck').attr('checked')==true){
     $(this).children('.imageover').hide();
     $(this).children('.imagestate').hide();
     $(this).children('.imagevisited').show();
    }else{

     $(this).children('.imageover').hide();
     $(this).children('.imagestate').show();
     $(this).children('.imagevisited').hide();
    }

   });

  });


  var clickMe=-1;

  //防止事件冒泡
  function setClickMe(){
//   $(".photoBox .imageover .photoCheck").attr("clickMe","1");
   clickMe=1;
  }


  //打开浏览图片页
  function viewPhoto(url){
   //var clickMe=$(".photoBox .imageover .photoCheck").attr("clickMe");

   //alert(clickMe);

   if(clickMe==undefined || clickMe==-1){
    alert(url);
    //location.href = url;
   }else{
    clickMe=-1;
//    $(".photoBox .imageover .photoCheck").attr("clickMe","-1");
   }

  }


  //取选中图片的ID
  function getPhotoIds(){
   var ids="";
   $('.photoBox').children('.imagevisited').each(function(){
    if($(this).css("display")=="block"){
     if(ids!=="")
      ids=ids+","+$(this).children('.photoImg').attr('photoId');
     else
      ids=ids+$(this).children('.photoImg').attr('photoId');
    }
   });

   alert(ids);
  }

</script>

</head>

<body>

<div class="photoBox">

<div class="imagestate" style="float:left; height:80px; width:80px; cursor:pointer;">
  <img src="1.gif" width="80" height="80" border="0" />
</div>

<div class="imageover" onclick="viewPhoto('http://www.baidu.com');" style="display:none; background:url(1.gif) no-repeat; float:left; height:80px; width:80px; text-align:left; cursor:pointer;">
  <input onclick="setClickMe();" class="photoCheck" type="checkbox" name="checkbox" />
</div>

<div class="imagevisited" style="display:none; background:url(1.gif) no-repeat; float:left; height:80px; width:80px; text-align:left; cursor:pointer;">
  <img class="photoImg" src="visited.gif" width="15" height="15" photoId="1001" />
</div>

</div>

<div class="photoBox">

<div class="imagestate" style="float:left; height:80px; width:80px; cursor:pointer;">
  <img src="1.gif" width="80" height="80" border="0" />
</div>

<div class="imageover" onclick="viewPhoto('http://www.baidu.com');" style="display:none; background:url(1.gif) no-repeat; float:left; height:80px; width:80px; text-align:left; cursor:pointer;">
  <input onclick="setClickMe();" class="photoCheck" type="checkbox" name="checkbox" />
</div>

<div class="imagevisited" style="display:none; background:url(1.gif) no-repeat; float:left; height:80px; width:80px; text-align:left; cursor:pointer;">
  <img class="photoImg" src="visited.gif" width="15" height="15" photoId="1002" />
</div>

</div>

<div class="photoBox">

<div class="imagestate" style="float:left; height:80px; width:80px; cursor:pointer;">
  <img src="1.gif" width="80" height="80" border="0" />
</div>

<div class="imageover" onclick="viewPhoto('http://www.baidu.com');" style="display:none; background:url(1.gif) no-repeat; float:left; height:80px; width:80px; text-align:left; cursor:pointer;">
  <input onclick="setClickMe();" class="photoCheck" type="checkbox" name="checkbox" />
</div>

<div class="imagevisited" style="display:none; background:url(1.gif) no-repeat; float:left; height:80px; width:80px; text-align:left; cursor:pointer;">
  <img class="photoImg" src="visited.gif" width="15" height="15" photoId="1003" />
</div>

</div>

<div onclick="getPhotoIds();">显示选中的图片ID</div>

</body>
</html>

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。