- 浏览: 341008 次
- 性别:
- 来自: 杭州
文章分类
- 全部博客 (354)
- 学习 (219)
- 工作 (69)
- 前端技术 (188)
- 个人评论 (1)
- 工作总结 (1)
- 工作的方法 (1)
- 代码库 (1)
- jQuery (63)
- javascript (4)
- css (4)
- 网络通信协议 (3)
- web (7)
- 服务端性能 (1)
- 优化 (1)
- html5 (4)
- serialize (1)
- 上线页面 (1)
- ie6 (6)
- js (1)
- iframe (1)
- flash (1)
- a (1)
- img (1)
- 页面tms的要求 (1)
- kissy (3)
- 需求也页面 (0)
- 需求页面 (2)
- 视频插件 (1)
- 切图片 (1)
- map (1)
- display (1)
- 浮动定位 (1)
- 大小图片的切换功能 (2)
- demo (1)
- margin (1)
- a标签 (1)
- border (1)
- 侧导航 (1)
- 切换PNG格式的css (1)
- padding (1)
- 显示添加和删除 (1)
- 滚动条 (1)
- 和图片处理 (1)
- 移动端 (1)
- 定位 (1)
- 移动端的包的引入作用与直接拨打电话的A标签 (1)
- git (1)
- node.js (1)
- Zepto (1)
最新评论
-
幻紫1992:
还有分页的功能、、(⊙o⊙)嗯
[JS代码库] -
幻紫1992:
就是没有返回顶部的按钮,这个页面、、
[JS代码库] -
幻紫1992:
很受用,O(∩_∩)O谢谢啦~
[JS代码库] -
nlnl520coco:
想下个东西 规则太苛刻了 网站得改进
[JS代码库] -
hxp520520:
new Limiter() 这个对象是kissy API里面的 ...
Limiter的简单demo--20131029
1、效果及功能说明
表单提交制作各大商城衣服尺寸选择勾选效果,点击购物车提交勾选尺寸value值。一款简单实用的衣服尺寸选择勾选效果
2、实现原理
通过查询当前的图片的id然后通过对应id找到在通过遍历后面说有尺码,找到相对应的尺码通过点击时间来触发,和当点击了以后添加一个类让点击以后出现在尺码的图标和其他的图标有明显的不一样让用户更好的知道自己选择了什么,在点击购物车的时候将有添加类的图片信息放进购物车内
主要的方法
3、效果图
4、运行环境
IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现
5、所有图片的压缩包新建一个文件后将包解压放进文件夹图片的压缩包在页面的最下方可以看到并下载下载后无需修改文件夹名因为本身就已经写好了和html5内的路径相吻合
6、将创建html文件保存的时候将编码类型换成(UTF-8有签名)这样可以让部分中文正常的显示出来,将保存类型(T)换成(所有文件(*.*)),将html5和解压后的图片文件夹放在同一个文件夹内效果
7、代码[html5]
表单提交制作各大商城衣服尺寸选择勾选效果,点击购物车提交勾选尺寸value值。一款简单实用的衣服尺寸选择勾选效果
2、实现原理
通过查询当前的图片的id然后通过对应id找到在通过遍历后面说有尺码,找到相对应的尺码通过点击时间来触发,和当点击了以后添加一个类让点击以后出现在尺码的图标和其他的图标有明显的不一样让用户更好的知道自己选择了什么,在点击购物车的时候将有添加类的图片信息放进购物车内
主要的方法
var thisToggle = $(this).is('.size_radioToggle') ? $(this) : $(this).prev(); //通过点击事件获得尺码的信息 thisToggle.addClass('current'); //添加这个类让图片不一样 return false; 在所有图片添加类里只能一次执行一次 $(".choosetext span").html(text) //对比收索以后的所有元素获得尺码 $("#" + id).find(".choosetext span.value").html() //放入购物车
3、效果图
4、运行环境
IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现
5、所有图片的压缩包新建一个文件后将包解压放进文件夹图片的压缩包在页面的最下方可以看到并下载下载后无需修改文件夹名因为本身就已经写好了和html5内的路径相吻合
6、将创建html文件保存的时候将编码类型换成(UTF-8有签名)这样可以让部分中文正常的显示出来,将保存类型(T)换成(所有文件(*.*)),将html5和解压后的图片文件夹放在同一个文件夹内效果
7、代码[html5]
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <style type="text/css"> *{margin:0;padding:0;list-style-type:none;} a{blr:expression(this.onFocus=this.blur())}/*去掉a标签的虚线框,避免出现奇怪的选中区域*/ body{background:#fff;font-size:12px;font-family:Helvetica,Arial,sans-serif,"宋体";color:#333;} .clear{display:block; clear:both;} .clearfix:after{content:"."; display:block; height:0; clear:both;visibility:hidden;} *html .clearfix{height:1%;} *+html .clearfix{height:1%;} a{color:#333;text-decoration:none;} a:hover{color:#990000;text-decoration:underline;} /* choose */ .choose{width:260px;margin:100px auto 0 auto;border:solid 1px #ddd;padding:15px 30px 30px 30px;} .choosetext{height:24px;padding:20px 0;font-size:14px;} .choosebox{padding:0 0 35px 0;} .choosebox li{float:left;margin-right:10px;display:inline;} .choosebox li a{float:left;background:#fff;font-size:14px;border:1px solid #ccc;height:14px;line-height:14px;padding:4px 12px; display:block;} .choosebox li a.current{background:url(images/right-icon.gif) no-repeat 100% 100%;border:1px solid #A10000;} .choosebox li input{display:none;} .choose .btn-img{width:160px;height:50px;overflow:hidden;background:url(images/cart.gif) no-repeat;cursor:pointer;border:0;} .choose .btn-img span{display:block;font-size:18px;font-weight:800;color:#fff;font-family:"微软雅黑","宋体";padding:0 0 0 50px;line-height:50px;} </style> <div class="choose" id="dress-size"> <form action="" method="get"> <div class="choosetext">尺寸:<span>未选择</span></div> <div class="choosebox"> <ul class="clearfix"> <li> <input type="radio" name="name" value="S" id="" /> <a href="javascript:void(0);" class="size_radioToggle"><span class="value">S</span></a> </li> <li> <input type="radio" name="name" value="M" id="" /> <a href="javascript:void(0);" class="size_radioToggle"><span class="value">M</span></a> </li> <li> <input type="radio" name="name" value="L" id="" /> <a href="javascript:void(0);" class="size_radioToggle"><span class="value">L</span></a> </li> <li> <input type="radio" name="name" value="XL" id="" /> <a href="javascript:void(0);" class="size_radioToggle"><span class="value">XL</span></a> </li> <li> <input type="radio" name="name" value="XXL" id="" /> <a href="javascript:void(0);" class="size_radioToggle"><span class="value">XXL</span></a> </li> </ul> </div> <div><button type="submit" class="btn-img"><span>放入购物车</span></button></div> </form> </div><!--choose end--> <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> <script type="text/javascript"> $(function(){ //定义方法 $('.choosebox li a').click(function(){ //定义点击事件 var thisToggle = $(this).is('.size_radioToggle') ? $(this) : $(this).prev(); //定义参数里面放当前的.size_radioToggle类并且获得检索每个段落方法 var checkBox = thisToggle.prev(); //定义参数里面放获得当前显示与隐藏状态方法在获得么一个段落 checkBox.trigger('click'); //定义checkBox参数获得点击事件 $('.size_radioToggle').removeClass('current'); //.size_radioToggle类删除current类 thisToggle.addClass('current'); //当前显示与隐藏添加的current类 return false; //返回否 }); }); $(".choosebox li a").click(function(){ //定义点击事件 var text = $(this).html(); //获得当前元素的内容 $(".choosetext span").html(text); //.choosetext span元素的text $("#result").html("" + getSelectedValue("result")); //获得resultID说有元素内容的值是resultID }); function getSelectedValue(id){ //定义方法 return //返回 $("#" + id).find(".choosetext span.value").html(); //获得ID通过遍历收索说有choosetext span.value里面的所有元素 } </script> </body> </html>
- images.rar (1.3 KB)
- 下载次数: 9
- 表单提交衣服尺寸选择勾选获取value值images.rar (1.3 KB)
- 下载次数: 10
发表评论
-
Zepto
2015-08-15 13:49 1233Zepto Zepto,是一个比较 ... -
node.js的学习-20140611
2014-06-11 23:17 768//创建一个h1方法里面舒服一个nihao functi ... -
node.js的学习-20140609
2014-06-09 23:01 579Node.js 是一个基于Chrome JavaScript ... -
git的学习-20140604
2014-06-04 23:30 531Git使用 首先 开启"G ... -
PC和移动端的页面的一些差距-20140525
2014-05-25 23:46 877首先 1、标签、描述等描述清晰准确 2、网站结构3层树状结构 ... -
Bootstrap排版基础样式和响应式图片-20140521
2014-05-22 00:41 2737Bootstrap基础排版样式 .col-xs-* // ... -
Bootstrap特性、设计和组件-20140519
2014-05-19 22:22 710特点 Bootstrap是基于jQuery框架开发的,它在j ... -
Bootstrap流式布局-20140515
2014-05-16 00:26 14752流布局是一种适应屏幕的做法。即不固定块的宽度,而是采用百分比作 ... -
Bootstrap的宽度和分辨率的差别-20140514
2014-05-14 23:05 6262首先在bootstrap里面所有 ... -
Bootstrap的认识-20140513
2014-05-14 00:09 1378通过公司的两个比较大 ... -
jquery初步认识-20140123
2014-01-24 01:30 693一、原型模式结构 // 定义一个jQuery构造函数 ... -
html5的特殊标签作用-20140114
2014-01-15 01:04 912<base>、定义页面中所有链接的基准URL & ... -
ie下的指定样式-20140106
2014-01-08 00:00 7671. <!--[if !IE]><!--&g ... -
margin-left在IE6下左浮动加倍-20140102
2014-01-02 23:04 749一、IE6下如果line-height超出本身区块的heigh ... -
浮动存在的问题-20131229
2013-12-29 23:00 540看一个正常的浮动案例 <!DOCTYPE h ... -
在ie6下同张图片不能外面包有a标签后在画热区-20131223
2013-12-23 23:47 867最近在做页面有的发现一个问题 <div class ... -
ie6下导航存在的问题和-2013-12-20
2013-12-21 00:51 638最近在做事的时候发现一个有趣的问题,在上网也找过但是都没有很好 ... -
按比例展示的小js-20131217
2013-12-18 00:41 434做需求的做到一个关于这个功能的项目所以记下来 Math.ra ... -
定位需要注意-20131214
2013-12-15 01:07 699在CSS中关于定位的内容 ... -
flash在Safari下的BUG-20131212
2013-12-12 01:09 768<object width="940&qu ...
相关推荐
jquery表单提交衣服尺寸选择勾选获取value值 jquery表单提交衣服尺寸选择勾选获取value值 jquery表单提交衣服尺寸选择勾选获取value值 jquery表单提交衣服尺寸选择勾选获取value值
本文将详细解析如何使用jQuery实现复选框的勾选功能,这在网页表单交互中十分常见。 首先,让我们理解复选框(checkbox)的基本概念。在HTML中,复选框元素 `<input type="checkbox">` 允许用户选择一个或多个选项...
3. **JavaScript辅助**:利用JavaScript在提交前动态处理表单数据,将所有选中的复选框值收集到一个数组,然后转换为JSON字符串或其他格式,再附着到某个隐藏字段的`value`上,这样服务器端就能获取到所有值。...
当用户勾选一个复选框时,jQuery提供了一些方便的方法来获取选中的复选框的值。例如,可以使用`$("input[type='checkbox']:checked")`选择器来选取所有被选中的复选框,然后通过`.val()`方法获取其值: ```...
**jQuery表单验证详解** 在Web开发中,表单验证是一项至关重要的任务,它确保用户输入的数据符合预期的格式和规则,从而防止错误数据的提交并提高用户体验。jQuery,一个流行的JavaScript库,提供了简单易用的API来...
本篇文章将详细讲解如何使用jQuery获取表单中不同类型的输入控件的值以及对表单进行其他操作。 首先,让我们回顾一下标题和描述中提到的场景。假设我们有一个HTML页面,其中包含了一个文本输入(text)、单选按钮...
例如,当用户勾选"记住我"选项时,可以将登录信息存储在Cookie中,下次访问时自动填充表单。 总结,jQuery 1.4.2作为一款经典版本,提供了丰富的DOM操作和事件处理能力,而jQuery Cookie插件则弥补了JavaScript原生...
在IT领域,尤其是在软件开发中,处理用户界面(UI)时,多选列表框(Multiple Select Boxes)是一种常见的组件,允许用户从多个选项中选择一个或多个值。本篇文章将深入探讨多选列表值的移动和获取,以及相关源码和...
本项目是关于使用jQuery实现一个可复选的表单,并将选定的选项添加到input表单中,这样的功能在网页交互中非常常见,例如用户填写问卷或选择服务时。 首先,我们需要理解jQuery的核心概念。jQuery通过提供简洁的API...
本知识点将围绕如何使用JQuery勾选指定name属性的复选框集合,并实现当勾选或取消勾选时显示用户选择的信息。 首先,需要了解JQuery的基础选择器和事件绑定方法。本例中,`$("input[name='love']")`是一个典型的CSS...
name属性用于在表单提交时标识数据,value属性则表示复选框的值,而id属性用于唯一标识一个元素。 在给定的标题和描述中,主要涉及两个场景: 1. **通过value值设置选中状态**: 当我们想要根据某个字符串(如"1,...
3. **表单选择器**:专门用于选取表单元素,如`$(":input")`选取所有输入元素,`$(":text")`选取文本输入框,`$(":checked")`选取已勾选的复选框或单选按钮。 4. **层次选择器**:用于选取基于元素间关系的元素。子...
本文将介绍如何利用jQuery来获取一组复选框(checkbox)中被勾选的项的值,并通过实例代码演示实现方法。此知识点适用于希望通过jQuery来简化JavaScript操作的web开发人员,特别是那些熟悉或希望使用jQuery进行DOM...
这里选择了所有已勾选的`type="radio"`的元素,并从中获取值。如果需要针对特定组的单选按钮,可以指定`name`属性,如`$("input[name='rd']:checked").val()`。 对于复选框(`<input type="checkbox">`),情况略有...
具体到获取被选中的复选框值,可以通过使用jQuery的选择器“input[name="test"]:checked”来选中所有名为“test”的复选框中被选中的项,然后使用.each()方法遍历这些被选中的复选框,并通过.val()方法获取它们的值...
- `value` 属性定义了每个选项的值,这将在提交表单时发送到服务器。 - 使用 `checked` 属性可以预设一个默认被选中的选项。 - 通过 `onclick` 或其他事件监听器可以添加交互功能,如实时验证。 2. **checkbox...
- **数据处理**: 代码中处理字符串值的方式可以用于各种场景,如将选中的项目ID或名称存储到隐藏字段中,以便在表单提交时能够获取这些数据。 以上知识点总结了文档中提及的使用jQuery实现勾选复选框触发事件给...
在IT行业中,尤其是在前端开发领域,经常需要处理用户交互,比如限制用户在多选框(Checkbox)中选择的项目数量。这个场景广泛存在于各种表单和数据筛选功能中。本篇我们将深入探讨如何实现“关于checkbox选择个数...
本篇笔记主要关注jQuery EasyUI的源码解析,特别是与数据操作相关的功能,如批量删除、表单编辑、行选择修改以及自定义编辑器方法。 ### 1. 批量删除 批量删除功能是数据管理中常见的一种操作,jQuery EasyUI提供...