`

用JQuery写的图片上加CheckBox

jQueryJavaScriptXHTMLCSSHTML 
阅读更多

<!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="imagestate"><a href="#"><img src="1.gif" width="80" height="80" border="0" /></a></div>
<div class="imageover"><input type="checkbox" name="checkbox" id="checkbox" /></div>
<div class="imagevisited"><img src="visited.gif" width="15" height="15" /></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="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>

分享到：
| 当JQuery与Prototype同时使用发生冲突时!
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jquery 的checkbox样式

    使用这个插件时，首先需要在页面中引入jQuery库和插件的相关文件。这包括在标签内添加对jQuery库的引用，如`&lt;script src="https://code.jquery.com/jquery-3.x.y.min.js"&gt;&lt;/script&gt;`，以及引入插件的JS和CSS文件，...

    jquery多图3D旋转图片轮播和checkbox美化.zip

    在这个“jquery多图3D旋转图片轮播和checkbox美化.zip”压缩包中，包含的是两个核心功能：一个基于jQuery实现的3D图片轮播效果，以及对checkbox样式的美化。 首先，我们来探讨jQuery 3D旋转图片轮播特效。这种特效...

    jquery radio checkbox 美化

    为了进一步提升用户体验，我们可以用图片或图标字体（如Font Awesome）替换原始的复选框和单选按钮。使用`content`伪元素和`before`或`after`，可以将自定义图标插入元素内。在jQuery事件处理中，我们根据元素的选中...

    checkbox 图片 兼容 JQ

    在IT行业中，尤其是在前端开发领域，"checkbox 图片 兼容 JQ"的主题涉及到的是如何在网页中使用图片替换默认的checkbox复选框，并确保这种替换在不同的浏览器，特别是老版本的Internet Explorer（IE）中也能正常工作...

    CheckBox兼容浏览器美化

    开发者可以将这个图片作为背景图应用到CheckBox上，通过CSS控制其显示和隐藏，如： ```css input[type="checkbox"] { background-image: url(1.gif); background-position: center; background-repeat: no-repeat...

    jQuery树形复选框插件.zip

    这些图片通过CSS引用，并在页面上呈现。在某些情况下，开发者可能需要替换这些图像以符合品牌形象。 `js`文件夹则包含了核心的JavaScript代码，这是整个插件的灵魂所在。通常，这个文件会定义一个函数或对象，用于...

    纯CSS+jQuery制作的相册里图片选中效果一点选中再点取消选中

    本教程将探讨如何使用纯CSS和jQuery来创建一个相册，其中的图片可以被选中和取消选中，就像常见的文件选择器中的“打对勾”效果。这个功能常见于上传图片的界面，让用户能够方便地标记他们想要操作的图片。 首先，...

    HTML+JQuery 图片列表选中图片并打勾

    在这个例子中，JQuery将被用来添加选中图片的打勾效果。以下是一个简单的JQuery实现： ```javascript $(document).ready(function() { // 当点击图片旁边的复选框时 $('#imageList .voteCheckbox').click...

    jQuery实现自定义checkbox和radio样式

    你可以根据需要调整这段代码，例如，用 CSS3 动画来增强用户体验，或者使用自定义的背景图片来呈现选中/未选中状态。 3. **样式美化**： 要达到自定义效果，我们需要在 CSS 中设置 label 的样式。例如，我们可以...

    用图片替换checkbox原始样式并实现同样的功能

    在JavaScript部分，我们使用jQuery来监听`checkbox`的点击事件，根据`checkbox`是否被选中来切换图片的源。这里需要注意的是，使用`siblings()`选择器时，应避免使用多层次的选择器，如`siblings(".box2&gt;img")`，而...

    使用jquery与图片美化checkbox和radio控件的代码(打包下载)

    用jquery实现的对checkbox和radio控件的美化，非常不错，大家可以通过修改图片来实现更漂亮的效果。

    jquery实现 复选框 选中和不选中 美化复选框

    若要实现图标效果，可以在`.custom-checkbox`元素中内联设置背景图片，或者使用图标字体库（如Font Awesome）。选中和未选中状态时，通过改变背景位置或更改图标类来展示不同的图标。 ```css .custom-checkbox {...

    jQuery选择器上机练习题及答案.rar

    (答案见下载资源) 上机任务1 用chrome打开dom.sample2.html页面...为某dom元素应用某css样式可以使用jQuery中的addClass方法，例如:将id为tt的div元素应用.bt样式，可用些语句：$("#tt").addClass("color","red");

    jquery多选框

    4. `jquery.bgiframe.js`：这是一个jQuery插件，主要用于解决在IE6和IE7下浮动元素与背景图片重叠的问题，确保多选框在这些旧版浏览器中的正确显示。 5. `前端页面.text`：这个文件很可能包含了一个或多个示例页面...

    自定义checkbox样式，

    本案例聚焦于自定义`checkbox`样式的实现，通过结合CSS（层叠样式表）和jQuery库，可以创造出独特且具有视觉吸引力的交互效果。`checkbox`是HTML中的一个基本元素，通常用于用户进行选择或确认操作。默认样式往往...

    JQuery&CSS;&CSS;+DIV实例大全.rar

    18.jQuery图片插件之鼠标放在图片上出现动态的hover效果插件 19.jQuery图片自动轮播淡入淡出的幻灯插件iFadeSlide 20.jQuery大气banner带时间线自动播放的焦点图轮番切换代码 21.jquery定时自动切换banner...

    jQuery高性能带复选框的树形结构插件

    **jQuery高性能带复选框的树形结构插件——highchecktree** 在Web开发中，树形结构常常用于展示层级关系的数据，例如组织结构、文件系统等。`highchecktree`是一个专门针对这种情况设计的jQuery插件，它能高效地...

    jquery简单用法大全

    jQuery事件处理如`$(element).on('event', handler)`，允许在指定元素上绑定事件处理器。`off()`用来取消事件绑定。 **jQuery工具方法** jQuery还提供了一系列工具方法，如`$.each()`, `$.trim()`, `$.grep()`, `$...

    1号店Checkbox复选框美化.zip

    总的来说，"1号店Checkbox复选框美化.zip"是一个帮助开发者提升网页界面美观度的工具，通过使用jQuery和CSS技术，将普通的复选框转变为更具吸引力的交互元素。这个资源包的学习和应用能够提升开发者在前端界面设计和...

Magicbox
Global site tag (gtag.js) - Google Analytics