<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. Idea使用Tomcat乱码 tomcat 9.0 8.5.37乱码

    使用新版tomcat 如8.5.37,9.0.14的时候idea控制台输出乱码,很简单老版本的如8.5.31就不会乱码,使用比较工具比较一下发现如下变化, 关键的关键是\apache-tomcat-8 ...

  2. iptables防火墙简介

    原文地址:http://drops.wooyun.org/tips/1424 一.iptables介绍 linux的包过滤功能,即linux防火墙,它由netfilter 和 iptables 两个组 ...

  3. Knockout v3.4.0 中文版教程-7-计算监控-依赖跟踪如何工作

    3.依赖跟踪如何工作 初学者不需要知道这一点,但更高级的开发人员将想知道为我们怎么实现KO自动跟踪依赖性和自动更新UI的正确部分... 它其实相当简单优雅,跟踪算法如下: 当你定义一个计算监控,KO立 ...

  4. HDU 4417 Super Mario(划分树问题求不大于k的数有多少)

    Super Mario Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total ...

  5. 【bzoj3696】化合物 树形dp

    题目描述 首长NOI惨跪,于是去念文化课了.现在,他面对一道化学题.这题的来源是因为在一个奇怪的学校两个化竞党在玩一个奇怪的博弈论游戏.这个游戏很蛋疼,我相信你们也没有兴趣听.由于这个游戏涉及博弈论, ...

  6. BZOJ 2244 [SDOI2011]拦截导弹 ——CDQ分治

    三维偏序,直接CDQ硬上. 正反两次CDQ统计结尾的方案数,最后统计即可. #include <cstdio> #include <cstring> #include < ...

  7. 算法复习——求最长不下降序列长度(dp算法)

    题目: 题目背景 161114-练习-DAY1-AHSDFZ T2 题目描述 有 N 辆列车,标记为 1,2,3,…,N.它们按照一定的次序进站,站台共有 K 个轨道,轨道遵从先进先出的原则.列车进入 ...

  8. 二分图最小覆盖的Konig定理及其证明,最小的覆盖证明

    [转http://www.cppblog.com/abilitytao/archive/2009/09/02/95147.html  ->  http://yejingx.ycool.com/p ...

  9. 页面中用Context.Handler传递

       最近被WCF弄得身心疲惫.今天抽空看了一下页面传值的一些技巧.传统的cookie session 什么的就不介绍了 今天介绍Context的用法 首先要应用using System.Runtim ...

  10. linux 管道符号 | ,以及&& ||等等特殊符号笔记

    管道和重导向:“|”.“>”.“>>”.“<” 重导向就是使命令改变它所认定的标准输出.“>”可将结果输出到文件中,该文件原有内容会被删除,“>>”则将结果附 ...