将表单数据转换成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>
分享到：
相关推荐
HtML javascritp checkbox 全选HtML javascritp checkbox 全选
winform DataGridView表头带CheckBox全选；winform DataGridView表头带CheckBox全选
checkBox全选——jscheckBox全选——jscheckBox全选——jscheckBox全选——jscheckBox全选——jscheckBox全选——js
JQuery 判断checkbox是否选中，checkbox全选，获取checkbox选中值
本文实例讲述了jQuery实现checkbox全选的方法。分享给大家供大家参考。具体分析如下： 通过checkbox 进行全选和取消全选的操作，如果通过toggle进行处理，则会出现checkbox无法显示对勾的问题。 使用click事件，根据...
jquery、js操作checkbox全选反选.docx
Checkbox全选反选.html
CheckBox全选与否，及删除问题
android checkbox全选反选
Jquery全选反选Checkbox 简单好用 复用性很好 欢迎下载
flex Datagrid checkbox全选 Datagrid
DevExpress 实现checkbox全选效果，内有主要代码，虽不能直接运行，但是都有详细的注释说明
JQuery实现checkbox的全选取消全选
页面上通过一个checkbox实现全选与反选
jquery Checkbox 全选 反选 全不选 多种实现方法 和表单验证
js实现checkbox 全选和取消 自己亲测可以使用
js checkbox全选 反选 取消全部设置表单html复选框
JS控制checkbox全选、取消全选、删除功能的代码贴出来。 看下面两种实现方法：
ExpandableListView中group和child自定义视图带CheckBox，实现child全选、部分选中功能，同时实现类似邮件群发的用户选择功能，选中的用户在EditText中显示，点击后移除. 更新： 1. ExpandableListView勾选后生成的...
C#实现 DataGridViewCheckBoxColumn CheckBox全选