关闭

jQuery点击“+”“—”加减号改变表单数值

标签: jquery
371人阅读 评论(0) 收藏 举报
分类:
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>点击加减或手动改变表单值</title>
<script src="http://www.codefans.net/ajaxjs/jquery-1.6.2.min.js"></script>
<style>
/*demo css*/
.i_tips{height:30px;margin-left:20px;color:#f60;font-size:14px;line-height:30px}
.i_box{margin:10px 20px;font-size:14px;float:left}
.i_box *{vertical-align:middle}
.i_box a{padding:2px 5px;background-color:#e9e9e9;border:1px solid #ccc;text-decoration:none;color:#585858;line-height:20px}
.i_box a:hover{color:#000}
.i_box input{width:30px;height:18px;margin:0 8px;padding:2px;border:1px solid #ccc;text-align:center;line-height:16px}
</style>
</head>
<body>
<!--DEMO start-->
<div id="demo">
	<div class="i_tips"></div>
    <div class="i_box"><a href="javascript:;" class="J_minus">-</a><input type="text" value="0" class="J_input" /><a href="javascript:;" class="J_add">+</a></div>
    <div class="i_box"><a href="javascript:;" class="J_minus">-</a><input type="text" value="0" class="J_input" /><a href="javascript:;" class="J_add">+</a></div>
    <div class="i_box"><a href="javascript:;" class="J_minus">-</a><input type="text" value="0" class="J_input" /><a href="javascript:;" class="J_add">+</a></div>
    <div class="i_box"><a href="javascript:;" class="J_minus">-</a><input type="text" value="0" class="J_input" /><a href="javascript:;" class="J_add">+</a></div>
    <div class="i_box"><a href="javascript:;" class="J_minus">-</a><input type="text" value="0" class="J_input" /><a href="javascript:;" class="J_add">+</a></div>	
</div> 
<script>
$.fn.iVaryVal=function(iSet,CallBack){
	/*
	 * Minus:点击元素--减小
	 * Add:点击元素--增加
	 * Input:表单元素
	 * Min:表单的最小值,非负整数
	 * Max:表单的最大值,正整数
	 */
	iSet=$.extend({Minus:$('.J_minus'),Add:$('.J_add'),Input:$('.J_input'),Min:0,Max:20},iSet);
	var C=null,O=null;
	//插件返回值
	var $CB={};
	//增加
	iSet.Add.each(function(i){
		$(this).click(function(){
			O=parseInt(iSet.Input.eq(i).val());
			(O+1<=iSet.Max) || (iSet.Max==null) ? iSet.Input.eq(i).val(O+1) : iSet.Input.eq(i).val(iSet.Max);
			//输出当前改变后的值
			$CB.val=iSet.Input.eq(i).val();
			$CB.index=i;
			//回调函数
			if (typeof CallBack == 'function') {
                CallBack($CB.val,$CB.index);
            }
		});
	});
	//减少
	iSet.Minus.each(function(i){
		$(this).click(function(){
			O=parseInt(iSet.Input.eq(i).val());
			O-1<iSet.Min ? iSet.Input.eq(i).val(iSet.Min) : iSet.Input.eq(i).val(O-1);
			$CB.val=iSet.Input.eq(i).val();
			$CB.index=i;
			//回调函数
			if (typeof CallBack == 'function') {
				CallBack($CB.val,$CB.index);
		  	}
		});
	});
	//手动
	iSet.Input.bind({
		'click':function(){
			O=parseInt($(this).val());
			$(this).select();
		},
		'keyup':function(e){
			if($(this).val()!=''){
				C=parseInt($(this).val());
				//非负整数判断
				if(/^[1-9]\d*|0$/.test(C)){
					$(this).val(C);
					O=C;
				}else{
					$(this).val(O);
				}
			}
			//键盘控制:上右--加,下左--减
			if(e.keyCode==38 || e.keyCode==39){
				iSet.Add.eq(iSet.Input.index(this)).click();
			}
			if(e.keyCode==37 || e.keyCode==40){
				iSet.Minus.eq(iSet.Input.index(this)).click();
			}
			//输出当前改变后的值
			$CB.val=$(this).val();
			$CB.index=iSet.Input.index(this);
			//回调函数
			if (typeof CallBack == 'function') {
                CallBack($CB.val,$CB.index);
            }
		},
		'blur':function(){
			$(this).trigger('keyup');
			if($(this).val()==''){
				$(this).val(O);
			}
			//判断输入值是否超出最大最小值
			if(iSet.Max){
				if(O>iSet.Max){
					$(this).val(iSet.Max);
				}
			}
			if(O<iSet.Min){
				$(this).val(iSet.Min);
			}
			//输出当前改变后的值
			$CB.val=$(this).val();
			$CB.index=iSet.Input.index(this);
			//回调函数
			if (typeof CallBack == 'function') {
                CallBack($CB.val,$CB.index);
            }
		}
	});
}
//调用
$( function() {
	
	$('.i_box').iVaryVal({},function(value,index){
		$('.i_tips').html('你点击的表单索引是:'+index+';改变后的表单值是:'+value);
	});
	
});
</script>


<!--DEMO end-->
<script>
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script>
try {
var pageTracker = _gat._getTracker("UA-15924173-1");
pageTracker._trackPageview();
} catch(err) {}
</script>
<!--@end-->
</body>
</html>

0
0
查看评论

js——input框实现淘宝一样的点击后商品数量的增加和减少

//商品数量的增加                 function number(){          &...
  • u014796999
  • u014796999
  • 2015-10-23 23:28
  • 3912

jQuery实现点击“+”“-”加减号改变文本框数值

jQuery实现点击“+”“-”加减号改变文本框数值_网页代码站(www.webdm.cn) /*demo css*/ .i_tips{height:30px;margin-left:20px;color:#f60;font-size:14px;line-height:30px} .i...
  • wfh_fighting
  • wfh_fighting
  • 2016-10-13 20:44
  • 2391

jQuery中点击+-加减号改变表单数值

$(document).ready(function(){ $("#btsub").click(function(){ var n=parseInt($("#buy_num").val()); ...
  • u013718071
  • u013718071
  • 2014-02-26 14:01
  • 876

.net考试题

在网上找来的,希望对大家有所帮助。1 (1)面向对象的语言具有__继承性_性、_封装性_性、_多态性 性。(2)能用foreach遍历访问的对象需要实现 _ IEnumerable 接口或声明_ GetEnumerator 方法的类型。1.c#中的三元运算符是__?:__2.当整数a赋值给一个obj...
  • mengfei2656
  • mengfei2656
  • 2007-11-23 18:10
  • 1309

漂亮的表单验证效果

昨晚从网上找了一个表单验证效果,感觉人家做的真好,让我自己做我怎么也做不出来这个效果。 有兴趣的可以去我的资源里边下载。
  • energeticsunxiaocong
  • energeticsunxiaocong
  • 2017-04-21 09:08
  • 313

js 控制显示加减号

方法1: 社会科 function chkClick(img) { img.src = img.src.toLowerCase().indexOf("NodeClose.jpg")!=-1?"images/NodeOpen.jpg":&...
  • keenweiwei
  • keenweiwei
  • 2013-03-06 16:07
  • 3079

javascript怎么做出一个加号点击之后变成一个减号而且隐身了内容

爱尔兰的天空(ai & love),wordpress,情侣主题,情侣博客,wordpress主题,wordpress博客 http://yangxiaozhao.sinaapp.com/ POPMusic 最好听的流行音乐在线收听,2013最新最全的中国华语流行音乐排行榜,推荐最红网络红...
  • u012532350
  • u012532350
  • 2013-11-23 23:46
  • 1328

详细解析浏览器加载网页的整个过程

现代浏览器的工作原理简介浏览器可以被认为是使用最广泛的软件,本文将介绍浏览器的工 作原理,我们将看到,从你在地址栏输入google.com到你看到google主页过程中都发生了什么。 将讨论的浏览器今天,有五种主流浏览器——IE、Firefox、Safari、Chrome及Opera。本文将基于一...
  • yuanmei1986
  • yuanmei1986
  • 2015-12-25 10:54
  • 5947

HTML相关知识整理

整理了一下html的香瓜知识,里面还包括css+js的相关知识,还有部分jquery: HTML var uname=Document.getElementById(“uname”); alert(uname.value);   CSS层叠样式表 内部样式 1.标签选...
  • weixin_39202006
  • weixin_39202006
  • 2017-12-27 09:29
  • 47

在购物车中,点击加 减号,改变购买的商品数量的监听器

//给加号减号IamgeView添加监听 // i是 每个购物项的position 下标 //holder.ivm 减号的控件 //holder.ivp 加号的控件 holder.ivm.setOnClickListener(...
  • Meng_fengyang
  • Meng_fengyang
  • 2016-04-26 00:40
  • 1759
    个人资料
    • 访问:2929次
    • 积分:78
    • 等级:
    • 排名:千里之外
    • 原创:3篇
    • 转载:9篇
    • 译文:0篇
    • 评论:0条
    文章分类