全部博文（2065）
分类： 系统运维
2010-03-20 09:19:16
JQuery操作checkbox整理
[整理人：遥方 整理时间：
一、如何判断一个checkbox是否选择上？
if($("#aa").attr("checked")==true) {
alert("此checkbox勾选择上");
}
二、
常用的操作请看整理的代码
HTML PUBLIC
"-//W
<html>
<head>
<meta http-equiv="Content-Type" content="text/html">
<script type="text/javascript"
src="jquery-
<SCRIPT LANGUAGE="JavaScript">
$("document").ready(function(){
$("#btn1").click(function(){
$("[name='checkbox']").attr("checked",'true');//全选
})
$("#btn2").click(function(){
$("[name='checkbox']").removeAttr("checked");//取消全选
})
$("#btn3").click(function(){
$("[name='checkbox']:even").attr("checked",'true');//选中所有奇数
})
$("#btn4").click(function(){
$("[name='checkbox']").each(function(){
if($(this).attr("checked"))
{
$(this).removeAttr("checked");
}
else
{
$(this).attr("checked",'true');
}
})
})
$("#btn5").click(function(){
var
str="";
$("[name='checkbox'][checked]").each(function(){
str+=$(this).val()+"\n";
})
alert(str);
})
})
script>
head>
<BODY>
<form name="form1" method="post" action="">
<input type="button" id="btn1" value="全选">
<input type="button" id="btn2" value="取消全选">
<input type="button" id="btn3" value="选中所有奇数">
<input type="button" id="btn4" value="反选">
<input type="button" id="btn5" value="获得选中的所有值">
<br>
<input type="checkbox" name="checkbox" value="checkbox1" id="aa">
checkbox1
<input type="checkbox" name="checkbox" value="checkbox2">
checkbox2
<input type="checkbox" name="checkbox" value="checkbox3">
checkbox3
<input type="checkbox" name="checkbox" value="checkbox4">
checkbox4
<input type="checkbox" name="checkbox" value="checkbox5">
checkbox5
<input type="checkbox" name="checkbox" value="checkbox6">
checkbox6
<input type="checkbox" name="checkbox" value="checkbox7">
checkbox7
<input type="checkbox" name="checkbox" value="checkbox8">
checkbox8
form>
body>
html>
非常方便！
----------------版本02补充
JQuery 获取checkbox的值然后 ajax提交
//服务器列表
var str="";
$("[name='host[]'][checked]").each(function(){
str+=$(this).val()+"\n";
})
if(str == "") {
alert("请选择服务器");
return;
}
var selectedItems = new Array();
$("input[@name='host[]']:checked").each(function() {selectedItems.push($(this).val());});
if (selectedItems .length == 0) {
alert("Please select item(s) to delete.");
}
var host = selectedItems.join('|');
$.ajax({
url: '',
type: 'post',
async: false, //如果服务器要开一个exec记得加这个参数值。要不然返回http 0！
dataType: 'text',
data:{"idc":idcname,"host":host},
timeout: 1000,
error: function(){
alert('Error loading XML document');
$("#uploadresult").html("");
},
success: function(xml){
$("#uploadresult").show();
$("#upload").toggle();
$("#uploadresult").html(xml);
}
});
然后服务器获取：
$res=explode("|",$host);
for($i=0;$i
}
就行了！
===========================补充一段AJAX==========================================
$("document").ready(function(){
$(".classinfo").click(function(){
var self = this; //闭包的一些概念!
var obj = this;
if (obj.checked == true) {
//表示要对它进行配置了
} else {
if(window.confirm("你确定要将此类移除?")) {
//通过ajax将这个类的属性配置删除掉
var classid = obj.value;
var hostgroupid = $("#groupid").val();
$.ajax({
type:"GET",
url: "?a=puppet&m=hostgroupclassdel&classid="+classid+"&hostgroupid="+hostgroupid+"&num="+Math.random(),
dataType: 'text',
success:function(msg){
if(msg=='1') {
alert("OK");
$(self).attr("disabled","disabled");
} else {
alert("DOWN");
}
}
})
}else {
$(this).attr("checked",true); //如果用户不选择
}
}
});
