`

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、效果图




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>
  • 大小: 11.3 KB
  • 大小: 11.3 KB
  • 大小: 24.6 KB
分享到:
评论

相关推荐

    jquery表单提交衣服尺寸选择勾选获取value值

    jquery表单提交衣服尺寸选择勾选获取value值 jquery表单提交衣服尺寸选择勾选获取value值 jquery表单提交衣服尺寸选择勾选获取value值 jquery表单提交衣服尺寸选择勾选获取value值

    jQuery实现的复选框勾选

    本文将详细解析如何使用jQuery实现复选框的勾选功能,这在网页表单交互中十分常见。 首先,让我们理解复选框(checkbox)的基本概念。在HTML中,复选框元素 `&lt;input type="checkbox"&gt;` 允许用户选择一个或多个选项...

    form中相同name的checkbox提交问题

    3. **JavaScript辅助**:利用JavaScript在提交前动态处理表单数据,将所有选中的复选框值收集到一个数组,然后转换为JSON字符串或其他格式,再附着到某个隐藏字段的`value`上,这样服务器端就能获取到所有值。...

    jQuery分别获取选中的复选框值

    当用户勾选一个复选框时,jQuery提供了一些方便的方法来获取选中的复选框的值。例如,可以使用`$("input[type='checkbox']:checked")`选择器来选取所有被选中的复选框,然后通过`.val()`方法获取其值: ```...

    Jquery表单验证

    **jQuery表单验证详解** 在Web开发中,表单验证是一项至关重要的任务,它确保用户输入的数据符合预期的格式和规则,从而防止错误数据的提交并提高用户体验。jQuery,一个流行的JavaScript库,提供了简单易用的API来...

    JQUERY获取form表单值的代码

    本篇文章将详细讲解如何使用jQuery获取表单中不同类型的输入控件的值以及对表单进行其他操作。 首先,让我们回顾一下标题和描述中提到的场景。假设我们有一个HTML页面,其中包含了一个文本输入(text)、单选按钮...

    jquery1.4.2.js和jquery.cookie.js

    例如,当用户勾选"记住我"选项时,可以将登录信息存储在Cookie中,下次访问时自动填充表单。 总结,jQuery 1.4.2作为一款经典版本,提供了丰富的DOM操作和事件处理能力,而jQuery Cookie插件则弥补了JavaScript原生...

    多选列表值的移动和获取值

    在IT领域,尤其是在软件开发中,处理用户界面(UI)时,多选列表框(Multiple Select Boxes)是一种常见的组件,允许用户从多个选项中选择一个或多个值。本篇文章将深入探讨多选列表值的移动和获取,以及相关源码和...

    jquery实现的可复选表单并且将其添加到input表单中的效果源码.zip

    本项目是关于使用jQuery实现一个可复选的表单,并将选定的选项添加到input表单中,这样的功能在网页交互中非常常见,例如用户填写问卷或选择服务时。 首先,我们需要理解jQuery的核心概念。jQuery通过提供简洁的API...

    JQuery勾选指定name的复选框集合并显示的方法

    本知识点将围绕如何使用JQuery勾选指定name属性的复选框集合,并实现当勾选或取消勾选时显示用户选择的信息。 首先,需要了解JQuery的基础选择器和事件绑定方法。本例中,`$("input[name='love']")`是一个典型的CSS...

    JS通过识别id、value值对checkbox设置选中状态

    name属性用于在表单提交时标识数据,value属性则表示复选框的值,而id属性用于唯一标识一个元素。 在给定的标题和描述中,主要涉及两个场景: 1. **通过value值设置选中状态**: 当我们想要根据某个字符串(如"1,...

    03-jQuery选择器和过滤器(20220302).ppt

    3. **表单选择器**:专门用于选取表单元素,如`$(":input")`选取所有输入元素,`$(":text")`选取文本输入框,`$(":checked")`选取已勾选的复选框或单选按钮。 4. **层次选择器**:用于选取基于元素间关系的元素。子...

    jquery获取一组checkbox的值(实例代码)

    本文将介绍如何利用jQuery来获取一组复选框(checkbox)中被勾选的项的值,并通过实例代码演示实现方法。此知识点适用于希望通过jQuery来简化JavaScript操作的web开发人员,特别是那些熟悉或希望使用jQuery进行DOM...

    JQuery表单元素取值赋值方法总结

    这里选择了所有已勾选的`type="radio"`的元素,并从中获取值。如果需要针对特定组的单选按钮,可以指定`name`属性,如`$("input[name='rd']:checked").val()`。 对于复选框(`&lt;input type="checkbox"&gt;`),情况略有...

    jquery获取复选框被选中的值

    具体到获取被选中的复选框值,可以通过使用jQuery的选择器“input[name="test"]:checked”来选中所有名为“test”的复选框中被选中的项,然后使用.each()方法遍历这些被选中的复选框,并通过.val()方法获取它们的值...

    radio、checkbox、select等选择标签的总结

    - `value` 属性定义了每个选项的值,这将在提交表单时发送到服务器。 - 使用 `checked` 属性可以预设一个默认被选中的选项。 - 通过 `onclick` 或其他事件监听器可以添加交互功能,如实时验证。 2. **checkbox...

    jquery实现勾选复选框触发事件给input赋值

    - **数据处理**: 代码中处理字符串值的方式可以用于各种场景,如将选中的项目ID或名称存储到隐藏字段中,以便在表单提交时能够获取这些数据。 以上知识点总结了文档中提及的使用jQuery实现勾选复选框触发事件给...

    关于checkbox选择个数限制

    在IT行业中,尤其是在前端开发领域,经常需要处理用户交互,比如限制用户在多选框(Checkbox)中选择的项目数量。这个场景广泛存在于各种表单和数据筛选功能中。本篇我们将深入探讨如何实现“关于checkbox选择个数...

    JQueryEasyUI学习笔记(十)源码

    本篇笔记主要关注jQuery EasyUI的源码解析,特别是与数据操作相关的功能,如批量删除、表单编辑、行选择修改以及自定义编辑器方法。 ### 1. 批量删除 批量删除功能是数据管理中常见的一种操作,jQuery EasyUI提供...

Global site tag (gtag.js) - Google Analytics