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()//放入购物车
<!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 id="dress-size"><form action="" method="get"><div name="name" value="S" id="" /><a href="javascript:void(0);" name="name" value="M" id="" /><a href="javascript:void(0);" name="name" value="L" id="" /><a href="javascript:void(0);" name="name" value="XL" id="" /><a href="javascript:void(0);" name="name" value="XXL" id="" /><a href="javascript:void(0);" 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>