将表单数据转换成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 全选
在ASP.NET开发中，CheckBox控件常常用于实现用户界面中的多选功能，而"CheckBox全选并删除"这个主题涉及到两个关键操作：全选和删除。全选功能允许用户一次性选择多个选项，删除则通常指的是从数据库或其他数据存储...
JQuery 判断checkbox是否选中，checkbox全选，获取checkbox选中值
3. **全选CheckBox**：创建一个全选CheckBox，其IsChecked属性绑定到一个表示所有选项的枚举值。当全选CheckBox被选中时，所有子CheckBox的IsChecked应设置为全选值；反之则取消所有子CheckBox的选择。 4. **事件...
这些示例代码可能包含了窗体设计、控件初始化、事件处理函数等内容，通过阅读和理解这些代码，你可以学习到如何在DevExpress环境中实现复选框全选效果。 请注意，由于没有实际的代码提供，这里只能给出一个概括性的...
在这个特定的场景中，我们关注的是如何在`DataGridView`的表头添加一个`CheckBox`，以便实现全选和全不选的功能。这将大大提升用户体验，使得用户可以快速地对所有行进行操作，如批量删除、更新等。 首先，我们需要...
### jQuery与JavaScript操作Checkbox全选反选 #### 一、引言 在Web开发中，Checkbox（复选框）是一种非常常见的用户界面元素，用于收集用户的多选输入。尤其是在表单设计时，Checkbox的全选与反选功能极大地方便了...
本文实例讲述了jQuery实现checkbox全选的方法。分享给大家供大家参考。具体分析如下： 通过checkbox 进行全选和取消全选的操作，如果通过toggle进行处理，则会出现checkbox无法显示对勾的问题。 使用click事件，根据...
要实现这个功能，我们需要创建两个自定义类：一个是`CheckBoxHeaderColumn`，作为数据列的扩展，另一个是`CheckBoxHeaderRenderer`，作为表头单元格的渲染器。此外，我们还需要为行中的checkbox创建一个自定义渲染器...
Checkbox全选反选.html
Checkbox是HTML中的一个表单元素，它允许用户在两个或多个选项之间进行选择。当用户勾选一个Checkbox时，代表他们选择了该选项，反之则未选中。 2. **在WebApplication1中使用Checkbox** WebApplication1可能是...
全选功能通常通过添加一个特殊的复选框实现，当用户勾选这个全选复选框时，所有子项复选框都会被自动勾选。这通常通过JavaScript或者jQuery实现，通过事件监听和DOM操作来同步全选状态。 接着，描述中提到了`<s:...
"Android CheckBox全选反选"这个话题主要涉及如何在ListView中实现CheckBox的选择与反选择操作，包括全选和反选的功能。ListView是Android系统提供的一种列表视图，它可以显示大量数据并允许用户进行交互。下面我们...
在网页开发中，Checkbox（复选框）是用户界面中常用的一种元素，它允许用户从多个选项中选择一个或多个。全选和反选功能在多选列表中尤其常见，例如在批量操作或者多条件筛选时。以下是三种实现Checkbox全选和反选的...
页面上通过一个checkbox实现全选与反选
在Windows Presentation Foundation (WPF) 中，CheckBox是一个常用的控件，用于表示两种状态：选中或未选中。在开发用户界面时，特别是在涉及到多选列表时，全选和反选功能是常见的需求。本教程将详细介绍如何在WPF...
而在这个特定的场景中，我们需要实现一个增强的功能：在`DataGridView`的列头添加一个`CheckBox`，通过这个`CheckBox`可以实现所有行中对应复选框的全选或反选操作。这个功能在数据管理界面中十分常见，例如在批量...
"js checkbox全选 反选 取消全部设置表单html复选框"这个标题描述了一个常见的功能需求，即通过JavaScript控制HTML中的复选框（checkboxes），实现全选、反选和取消全部选中的功能。在本文中，我们将深入探讨如何...
在IT领域，特别是前端开发中，使用jQuery来操作DOM元素是一种常见的实践，特别是在处理复选框（checkbox）的全选与取消全选功能时。本文将深入解析如何使用jQuery实现这一功能，通过分析给定代码片段，提炼出关键...
全选功能通常涉及两个主要组件：全选按钮和一组复选框。在 EasyUI 中，我们可以利用 `checkbox` 组件来创建复选框，并通过事件监听和数据同步来实现全选/反选的效果。下面将详细介绍如何实现这一功能： 1. **添加...