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

最新推荐文章于 2022-09-23 12:36:15 发布

cu22222

最新推荐文章于 2022-09-23 12:36:15 发布

阅读量196

点赞数

分类专栏： jQuery 文章标签： jquery checkbox form json ViewUI

本文链接：https://blog.csdn.net/cu22222/article/details/84277642

版权

jQuery 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

将表单数据转换成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>