JQuery checkbox复选框操作
【转载请注明出处:http://blog.csdn.net/leytton/article/details/38613799】
项目中需要用到checkbox复选框遍历操作,在网上找了段代码不过有问题,查询手册修改后贴出来留着
注：attr方法会存在重置后，无法重选等问题，用prop方法代替
代码如下
<!DOCTYPE html>
<html>
<head>
<script src="jquery.min.js"></script>
</head>
<body>
<form action="./test.html" method="get">
<input type="checkbox" name="checkbox1" id="checkboxId" value="checkbox1">checkbox1
<input type="checkbox" name="checkbox2" value="checkbox2">checkbox2
<input type="submit" value="submit"/>
<input type="reset" value="原生重置"/>
</form>
<input type="button" id="btn1" value="遍历所有">
<input type="button" id="btn2" value="全选">
<input type="button" id="btn3" value="JS代码重置">
<input type="button" id="btn4" value="选择一个">
<input type="button" id="btn5" value="取消">
<script type="text/javascript">
function geAllSelectedItems(){ //遍历所有
var items="";
$("[type='checkbox']:checked").each(function(){
items+=($(this).val()+"\n");
});
alert(items);
}
function allSelect(){
$("[type='checkbox']").prop("checked",true);//全选
}
function allUnSelect(){
$("[type='checkbox']").prop("checked",false);//重置
}
function SelectOne(){
$("#checkboxId").prop("checked",true);//选择一个
}
function unSelectOne(){
$("#checkboxId").prop("checked",false);//取消
}
$("#btn1").click(function(){
geAllSelectedItems();
});
$("#btn2").click(function(){
allSelect();
});
$("#btn3").click(function(){
allUnSelect();
});
$("#btn4").click(function(){
SelectOne();
});
$("#btn5").click(function(){
unSelectOne();
});
</script>
</body>
</HTML> 