2つのjqueryプラグイン:フォームをシーケンス化し、checkboxの全選択を処理
フォームデータをJSONオブジェクトに変換し、checkboxのセットをすべて選択し、すべて選択しない、半選択の問題を処理します.
前のプラグインは他の人のを回転して、后の1つは自分で书いたので、高い人にどうぞよろしくお愿いします:)
前のプラグインは他の人のを回転して、后の1つは自分で书いたので、高い人にどうぞよろしくお愿いします:)
<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>