<script language="javascript">

 $(document).ready(function(){

     //各行换色

     $('table tr:odd').addClass('tr_odd'); //奇数行

     $('table tr:even').addClass('tr_even'); //偶数行

     //单击行选中是事件

      $("tr").bind("click",function(){

         if( $(this).hasClass('selected') ){

             $(this).removeClass('selected')

                    .find(":checkbox").attr("checked",false);

         }else{

             $(this).addClass('selected')

                    .find(":checkbox").attr("checked",true);

         }

     })

     //全选事件

     $("#selectAll").click(function(){

         $(":checkbox").attr("checked","checked");

     });

     //反选事件

     $("#unSelect").click(function(){

         var checkbox=$(":checkbox");

         for(var i=0;i<checkbox.length;i++){

             checkbox[i].checked=!checkbox[i].checked;

         }

     });

     //取消事件

     $("#cancelSelect").click(function(){

         $(":checkbox").removeAttr("checked");

     });

 });
<body>

 <input type="button" value="全选" id="selectAll">

 <input type="button" value="反选" id="unSelect">

 <input type="button" value="取消" id="cancelSelect">

 <table width="200" border="1">

   <tr>

     <td>cxv</td>

     <td>zxcv</td>

     <td>zxcv</td>

   </tr>

   <tr>

     <td><form id="form1" name="form1" method="post" action="">

       <label>

         <input type="checkbox" name="checkbox" value="checkbox" />

         </label>

     </form>    </td>

     <td>zxcv</td>

     <td>gfh</td>

   </tr>

   <tr>

     <td><form id="form2" name="form2" method="post" action="">

       <label>

         <input type="checkbox" name="checkbox2" value="checkbox" />

         </label>

     </form>    </td>

     <td>fhg</td>

     <td>ghj</td>

   </tr>

   <tr>

     <td><form id="form3" name="form3" method="post" action="">

       <label>

         <input type="checkbox" name="checkbox3" value="checkbox" />

         </label>

     </form>    </td>

     <td>dfg</td>

     <td>fgh</td>

   </tr>

 </table>

 </body>

 </html>
<script language="JavaScript" type="text/javascript">

function Checkbox1() {

var o=new Array()

var j=0

var obj=document.form1.getElementsByTagName("INPUT")

for (var i=0;i<=obj.length-1;i++){

    if (obj[i].checked){o[j]=obj[i].value;j++}

}

    alert(o);

}

</script>

<form name="form1">

<input name="ID" type="checkbox" value="1">

<input name="ID" type="checkbox" value="2">

<input name="ID" type="checkbox" value="3">

<input type="button" onclick="Checkbox1();" value="提交">

</form>
<script>

function Checkbox1(form){

var checks = form.ID;

for(i=0; i<checks.length; i++){

    var obj = checks[i];

    if(obj.checked == true){

        alert(obj.value);

    }

}

}

</script>

<form name="form1">

<input name="ID" type="checkbox" value="1">

<input name="ID" type="checkbox" value="2">

<input name="ID" type="checkbox" value="3">

<input type="button" onclick="Checkbox1(this.form)" value="提交">

</form>

基于jquery 全选、反选、各行换色、单击行选中事件实现代码的更多相关文章

  1. jQuery全选/反选checkbox

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 关于JQuery全选/反选第二次失效的问题

    最近在项目中,遇到一个问题,测试全选/反选功能时,第一次对母框进行选中/非选中时,能同步子框的全选/反选状态,之后再点击母框,子框就没反应了.原代码大致结构关键如下: function selectA ...

  3. jQuery全选反选插件

    (function($){ $.fn.check = function(options){ var options = $.extend({ element : "input[name='n ...

  4. jQuery全选反选实例

    1. $('#tb:checkbox').each(function(){ 每次都会执行 全选-取消操作,注意$('#tb :checkbox').prop('checked',true); tb后面 ...

  5. JQuery 全选 反选 获取Table 中指定td的元素值

    //全选 function initTableCheckbox() { var $thr = $('table thead tr'); var $checkAllTh = $('<th>& ...

  6. jquery全选 反选

    //全选 反选 $('#chkAll').on('click',function(){ $('input.chkbox').prop('checked',$(this).prop('checked') ...

  7. 关于jquery全选反选 批量删除的一点心得

    废话不多说直接上代码: 下面是jsp页面的html代码: <table id="contentTable" class=""> <thead& ...

  8. jquery全选反选

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. jQuery 全选 反选 单击行改变背景色

    我先把CSS样式放出来,其实这个可以直接忽略 ;;font-size:12px;font-family:微软雅黑;} .datagrid{width:100%;} .datagird tr th{ba ...

随机推荐

  1. C++ 实验六

    Part.2 // 合并两个文件内容到一个新文件中. // 文件名均从键盘输入 #include <iostream> #include <fstream> #include ...

  2. Python标准库之csv(1)

    Python标准库之csv(1) 1.Python处理csv文件之csv.writer() import csv def csv_write(path,data): with open(path,'w ...

  3. Codeforces Round #204 (Div. 2)

    D. Jeff and Furik time limit per test 1 second memory limit per test 256 megabytes input standard in ...

  4. 九度oj 题目1530：最长不重复子串

    题目描述: 最长不重复子串就是从一个字符串中找到一个连续子串,该子串中任何两个字符都不能相同,且该子串的长度是最大的. 输入: 输入包含多个测试用例,每组测试用例输入一行由小写英文字符a,b,c... ...

  5. shrio注解的方式进行权限控制

    除了通过API方式外,Shiro 提供Java 5+注解的集合,以注解为基础的授权控制.在你可以使用Java 注释之前,你需要在你的应用程序中启用AOP 支持. Shiro注解支持AspectJ.sp ...

  6. 【bzoj2989】数列 KD-tree+旋转坐标系

    题目描述 给定一个长度为n的正整数数列a[i]. 定义2个位置的graze值为两者位置差与数值差的和,即graze(x,y)=|x-y|+|a[x]-a[y]|. 2种操作(k都是正整数): 1.Mo ...

  7. 【Luogu】P1868饥饿的奶牛（DP）

    题目链接 话说我存一些只需要按照一个关键字排序的双元素结构体的时候老是喜欢使用链式前向星…… DP.f[i]表示前i个位置奶牛最多能吃到的草.转移方程如下: f[i]=f[i-]; f[i]=max( ...

  8. 常州模拟赛d3t1 神在夏至祭降下了神谕

    题目描述 我们村子在过去的400年中,断绝与下界的接触,过着自给自足的生活. 夏至祭是一场迎接祖灵于夏季归来,同时祈求丰收的庆典. 村里的男人会在广场上演出夏之军和冬之军的战争.夏之军会打倒冬之军的大 ...

  9. Spring学习之路——简单入门HelloWorld

    Spring简单介绍 Spring是一个提供了解决J2EE问题的一站式框架. Spring的核心是反转控制,通过配置文件完成业务对象之间的依赖注入,他鼓励一个良好的习惯,就是注入对接口编程而不是对类编 ...

  10. *Codeforces587E. Duff as a Queen

    $n \leq 200000$的序列,支持以下$q \leq 4e4$个操作:区间异或$k$:查询区间能异或出多少不同的数.数字$0 \leq a_i \leq 1e9$. 大概是要区间线性基.区间修 ...