[实践Ok] Jquery一句话全选的代码及jquery 操作复选框checkbox的例子(全选,反选,获取选取值)

jackxiang 2011-10-25 09:15

Jquery一句话全选的代码，实践Ok：$("input[type='checkbox']").attr("checked","checked");

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery 操作checkbox的例子(全选,反选,获取选取值)</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>!window.jQuery && document.write('<script src="js/jquery-1.4.2.min.js"><\/script>')    
</script>
<SCRIPT LANGUAGE="JavaScript">
     $().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']").each(function(){
      $("input[type='checkbox']:checked").each(function(){
              str+=$(this).val()+"\r\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">
  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>

选中所有的Checkbox：

  // 反选   $("#reverse-select").click(function() {   $('.table tr').each(function() {   var input = $(this).find('input');   var statu=input.prop("checked")==true?false:true;   input.prop("checked",statu);   });   });
    我在table上面每一行放了个checkbox 然后用按钮单击，实现反选


    主要是这一行：var statu=input.prop("checked")==true?false:true;
    如果选中就为false否则为true
    代码还可以精简的。

  作者：u010402518 发表于2013-5-5 1:51:15 原文链接

最后编辑： jackxiang 编辑于2015-10-26 11:52

[个人原创]PHP开发中修改Windows下的host文件快捷方法

给Adobe Dreamweaver CS5安装jQuery语法提示插件

评论列表

向东博客专注WEB应用构架之美 --- 构架之美，在于尽态极妍 | 应用之美，在于药到病除|赢在IT，Playin' with IT,Focus on Killer Application,Marketing Meets Technology.

[实践Ok] Jquery一句话全选的代码及jquery 操作复选框checkbox的例子(全选,反选,获取选取值)

分类

最新日志

链接

向东博客 专注WEB应用 构架之美 --- 构架之美，在于尽态极妍 | 应用之美，在于药到病除|赢在IT，Playin' with IT,Focus on Killer Application,Marketing Meets Technology.

[实践Ok] Jquery一句话全选的代码及jquery 操作复选框checkbox的例子(全选,反选,获取选取值)

分类

最新日志

链接

向东博客专注WEB应用构架之美 --- 构架之美，在于尽态极妍 | 应用之美，在于药到病除|赢在IT，Playin' with IT,Focus on Killer Application,Marketing Meets Technology.