checkbox使用示例

复制代码 代码如下:

  <html>

  <head>

  <title>

  checkbox测试

  </title>

  <script type='text/javascript' src='jquery-1.8.2.min.js'></script>

  <script type="text/javascript">

  $(document).ready(function(){

  $("#all").change(function() {

  //alert($("#all").val()); //获得checkbox的值

  // alert($("#all").get(0).checked); //值为true 和false

  if($("#all").get(0).checked){ //将jquery对象转化为dom对象 使用的是dom对象的属性

  $(":checkbox").attr({

  //checked: 'checked' 可以和下面一句替换

  "checked":true

  });

  }else{

  //$(":checkbox").removeAttr('checked'); 可以和下面一句替换

  $(":checkbox").attr({

  "checked":false

  });

  }

  //第一种操作数组方法

  /* //each(function()) 函数

  var arr=new Array(); //一般处理是checkbox中值用数组表示 传递到后台

  var i=0;

  $(":checkbox").each(function(index){

  if($(this).val()=="1"){

  return true;

  }

  arr[i]=$(this).val();

  alert(i +"前面是下标后面是值"+ arr[i++]); //获得checkbox 值

  }); */

  //第二种操作数组方法

  var arr= new Array();

  $(":checkbox").each(function(index){

  if($(this).val()!="1"){

  arr.push($(this).val());

  }

  });

  //组个输出数组值

  for(var j=0;j<arr.length;j++){

  alert(arr[j]);

  }

  var str=arr.join(","); //将数组用,好连接成为字符串

  alert(str); //输出字符串

  });

  });

  </script>

  </head>

  <body>

  <input type='checkbox' id='all' value='1' />全选<br />

  <input type='checkbox' id='all1' value='2' />num1<br />

  <input type='checkbox' id='all2' value='3' />num2<br />

  <input type='checkbox' id='all3' value='4' />num3<br />

  <input type='checkbox' id='all5' value='5' />num4<br />

  </body>

  </html>