JQuery checkbox复选框操作

最新推荐文章于 2023-02-23 18:15:52 发布

weixin_30839881

最新推荐文章于 2023-02-23 18:15:52 发布

阅读量82

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/leytton/p/8253353.html

版权

【转载请注明出处: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>

转载于:https://www.cnblogs.com/leytton/p/8253353.html