jQuery 表单提交衣服尺寸选择勾选获取value值-20130720

1、效果及功能说明

表单提交制作各大商城衣服尺寸选择勾选效果，点击购物车提交勾选尺寸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、效果图

[img]http://dl2.iteye.com/upload/attachment/0087/2205/7792e1b1-901a-380e-aa50-de8fa59f0c1f.jpg[/img]

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>

jQuery 表单提交衣服尺寸选择勾选获取value值-20130720相关推荐

html表单提交前验证,jquery表单提交前实现同步验证（附代码）
jquery表单提交前实现同步验证 .int{ height: 30px; text-align: left; width: 600px; } label{ width: 200px; margin- ...
jQuery表单提交和后台交互
要求:仅使用jQuery提交表单和后台交互,不使用基于jQuery的表单插件方式1.取到页面控件的值后拼接放在data中,传递到后台页面代码: <!DOCTYPE html PUBLIC & ...
泛微oa流程表单之check框至少勾选一个
<script> jQuery(document).ready(function(){checkCustomize = function (){if((jQuery("#fiel ...
Django框架下的form表单提交数据（及文件）获取的方法
目录一.文件的提交和获取 1.html代码: 2.django代码: 二.文本的提交和获取 html: urls.py: 编辑 views.py: 编辑结果: 一.文件的提交和获取一般思路为 ...
html表单提交不判断,请问jquery有方法可以判断一个表单提交之后结果是成功或不成功吗？...
具体是这样的,今天在做项目的时候用到layer弹出插件,我弹出的是一个iframe层.我用了ajax提交,通过ajax提交后的回调判断提交是否成功,成功就调用parent.layer.close(in ...
jQuery最简单的表单提交方式
第一步:绑定事件常用的与ajax相关的事件参考如下: 1.$(selector).click(function) 2.$(selector).change(function) 3.$(selecto ...
在可编辑表格EditorGrid中，我选择一行已输入的数据，点击删除按钮，该行数据将被删除，然后当我点击表单提交按钮时，已经被删除的那一行数据仍然被插入数据库中...
为什么80%的码农都做不了架构师?>>> 问题描述:在可编辑表格中,我选择一行已输入的数据,点击删除按钮,该行数据将被删除,然后当我点击表单提交按钮时,已经被删除的那一行数据仍 ...
Jquery中实现表单提交到SSM后台前进行post请求实现数据的校验
场景表单中有两个输入框input在提交这个表单前需要对两个输入框进行校验. 即点击提交按钮时会经过校验的方法,此方法会post方式提交到后台,在请求后台成功后的回调方法中会对js变量进行赋值,进而决 ...
jQuery Mobile中链接（包含button和表单提交的链接）的data-*选项
全栈工程师开发手册 (作者:栾鹏) jQuery Mobile 所有data-*选项 jQuery Mobile中链接的data-*选项所有的链接,包含那些带有 data-role="bu ...

jQuery 表单提交衣服尺寸选择勾选获取value值-20130720

jQuery 表单提交衣服尺寸选择勾选获取value值-20130720相关推荐

最新文章

热门文章