当前位置: 代码迷 >> .NET相关 >> checkbox复选框全选跟取消全选实例代码
  详细解决方案

checkbox复选框全选跟取消全选实例代码

热度:122   发布时间:2016-04-24 02:36:48.0
checkbox复选框全选和取消全选实例代码

checkbox复选框全选和取消全选实例代码:
关于复选框的全选和不全选是非常常见的操作,本章节分享一段代码实例,能够实现多种选中和取消选中功能。
代码实例如下:

 

<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> <script type="text/javascript">$("document").ready(function(){  $("#all").click(function(){       if(this.checked)    {         $("input[name='checkbox']").each(function(){this.checked=true;});      $("#btn1").attr("value","反选");       }    else    {         $("input[name='checkbox']").each(function(){this.checked=false;});         $("#btn1").attr("value","全选");     }     });    $("#btn1").click(function(){    $("[name='checkbox']").attr("checked",'true');  })     $("#cancel").click(function(){    $("[name='checkbox']").removeAttr("checked");  })     $("#jishu").click(function(){    $("[name='checkbox']:even").attr("checked",'true');  })     $("#fanxuan").click(function(){    $("[name='checkbox']").each(function(){      if($(this).attr("checked"))      {        $(this).removeAttr("checked");      }      else      {        $(this).attr("checked",'true');      }    })  })  $("#get").click(function(){    var str="";    $("[name='checkbox'][checked]").each(function(){      str+=$(this).val()+"/r/n";    })    alert(str);  })}) </script> </head> <body> <form name="form1" method="post" action="">   <input type="checkbox" id="all" name="all">   <input type="button" id="btn1" value="全选">   <input type="button" id="cancel" value="取消全选">   <input type="button" id="jishu" value="选中所有奇数">   <input type="button" id="fanxuan" value="反选">   <input type="button" id="get" value="获得选中的所有值">   <br>   <input type="checkbox" name="checkbox" value="蚂蚁部落一">   蚂蚁部落一   <input type="checkbox" name="checkbox" value="蚂蚁部落二">   蚂蚁部落二   <input type="checkbox" name="checkbox" value="蚂蚁部落三">   蚂蚁部落三   <input type="checkbox" name="checkbox" value="蚂蚁部落四">   蚂蚁部落四   <input type="checkbox" name="checkbox" value="蚂蚁部落五">   蚂蚁部落五   <input type="checkbox" name="checkbox" value="蚂蚁部落六">   蚂蚁部落六   <input type="checkbox" name="checkbox" value="蚂蚁部落七">   蚂蚁部落七   <input type="checkbox" name="checkbox" value="蚂蚁部落八">   蚂蚁部落八 </form></body></html>

 

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=11012

更多内容可以参阅:http://www.softwhy.com/jquery/

 

  相关解决方案