jQuery实现CheckBox全选、全不选

黄振国 · 发表于 2014-12-20 13:18:27

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>jQuery实现CheckBox全选、全不选</title>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
      $(function() {
         $("#checkAll").click(function() {
            $('input[name="subBox[]"]').attr("checked",this.checked);
         });
         var $subBox = $("input[name='subBox']");
         $subBox.click(function(){
            $("#checkAll").attr("checked",$subBox.length == $("input[name='subBox']:checked").length ? true : false);
         });
      });
</script>

</head>
<body>
<?php var_dump($_POST['subBox']);?>
<form action="" method="post">
<div>
      <input id="checkAll" type="checkbox" />全选
      <input name="subBox[]" type="checkbox" value="1"/>项1
      <input name="subBox[]" type="checkbox" value="2"/>项2
      <input name="subBox[]" type="checkbox" value="3"/>项3
      <input name="subBox[]" type="checkbox" value="4"/>项4
</div>
<input type="submit" name="submit">
</form>

</body>
</html>

黄振国 · 发表于 2014-12-20 13:18:35

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>js</title>
</head>
<script language="javascript">
function aa(){
var r=document.getElementsByName("r");
var v=new Array();
str="";
for(var i=0;i<r.length;i++){
   if(r[i].checked){
str=str+r[i].value+"|";
   }
}
str=str.substring(0,str.length-1);

return str;

}
function bb(){
if(aa() instanceof Array){
var arr=new Array();
var str;
arr=aa();
str="";
for(var i=0;i<arr.length;i++){
   if(typeof(arr[i])!="undefined"){
   //alert(r[i].value+","+r[i].nextSibling.nodeValue);
   str=str+arr[i]+"|";
}
}
str=str.substring(0,str.length-1);
}
console.log(str);
}
</script>
<body>
<form name="form1" method="post" action="">
<input type="checkbox" name="r" value="1">a<br>
<input type="checkbox" name="r" value="2">b<br>
<input type="checkbox" name="r" value="3">c<br>
<input type="checkbox" name="r" value="4">d<br>
<input type="checkbox" name="r" value="5">e<br>
<input type="checkbox" name="r" value="6">f<br>
<input type="checkbox" name="r" value="7">g<br>
<input type="checkbox" name="r" value="8">h<br>
<input type="checkbox" name="r" value="9">i<br>
<input type="checkbox" name="r" value="10">j<br>
<br>
<input type="button" onclick="alert(aa())" value="button">
<input type="button" onclick="bb()" value="button">

</form>
</body>
</html>

		自动登录	找回密码
密码			立即注册

[JS] jQuery实现CheckBox全选、全不选

浏览过的版块