两个jquery插件：序列化表单，处置checkbox全选

两个jquery插件：序列化表单，处理checkbox全选
将表单数据转换成JSON对象，处理一组checkbox全选，全不选，半选的问题
前一个插件是转别人的，后一个的是自己写的，请高人多多指教：）

<html>  
<head>
	<script type='text/javascript' src="jquery-1.6.4.js"></script>
	<script type='text/javascript'>
	/*
		序列化表单数据到JSON对象
	*/
	(function($){
		$.fn.serializeJson=function(){
			var serializeObj={};
			var array=this.serializeArray();
			var str=this.serialize();
			$(array).each(function(){
				if(serializeObj[this.name]){
					if($.isArray(serializeObj[this.name])){
						serializeObj[this.name].push(this.value);
					}else{
						serializeObj[this.name]=[serializeObj[this.name],this.value];
					}
				}else{
					serializeObj[this.name]=this.value;	
				}
			});
			return serializeObj;
		};
	})(jQuery);
	
	
	/*
		一组checkbox，全选，全不选，半选
	*/
	(function($){
		$.extend({
			ckeckboxSelectAll: function(selectAllCheckboxSelector, selectCheckBoxArraySelector){
				var selectAllCheckbox = $(selectAllCheckboxSelector);
				var selectCheckBoxArray = $(selectCheckBoxArraySelector);
				selectAllCheckbox.bind('click', function(e){
					selectCheckBoxArray.each(function(index, ck){
						ck.checked = selectAllCheckbox[0].checked;
					});
				});
				
				selectCheckBoxArray.bind('click', function(e){
					var allChecked = true;
					var allNotChecked = true;
					selectCheckBoxArray.each(function(index, c){
						if(c.checked){
							allNotChecked = false;
						}else{
							allChecked = false;
						}
					});
					var ck = selectAllCheckbox[0];
					if(allChecked){
						ck.checked = true;
						ck.indeterminate = false;
					}
					else if(allNotChecked){
						ck.checked = false;
						ck.indeterminate = false;
					}
					else{
						ck.indeterminate = true;
					}
								
				});
			}
		});
	})(jQuery);

	$(function(){
		$.ckeckboxSelectAll("#all", "input[name='ck']");
	});
	
	function submitForm(){
		console.log($("#myForm").serializeJson());
	}
	</script>
</head>
<body>
<form id="myForm" action="http://www.baidu.com" method="GET">
	<input name="name"/>
	<input name="age"/><br/>
	<input type="checkbox" name="ckox" value="1"/>
	<input type="checkbox" name="ckox" value="2"/>
	<input type="checkbox" name="ckox" value="3"/>
	<input type="button" onclick="submitForm()" value="Submit"/>
</form>
<br/><br/>

<br/><br/>
<input type="checkbox" id="all" /><br/>
<hr/>
<input type="checkbox" name="ck" /><br/>
<input type="checkbox" name="ck" /><br/>
<input type="checkbox" name="ck" /><br/>
<input type="checkbox" name="ck" /><br/>
<input type="checkbox" name="ck" /><br/>
<input type="checkbox" name="ck" /><br/>
<input type="checkbox" name="ck" /><br/>
<input type="checkbox" name="ck" /><br/>

</body> 
</html>

两个jquery插件：序列化表单，处置checkbox全选

相关推荐