基于jquery 全选、反选、各行换色、单击行选中事件实现代码
<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 全选、反选、各行换色、单击行选中事件实现代码的更多相关文章
- jQuery全选/反选checkbox
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 关于JQuery全选/反选第二次失效的问题
最近在项目中,遇到一个问题,测试全选/反选功能时,第一次对母框进行选中/非选中时,能同步子框的全选/反选状态,之后再点击母框,子框就没反应了.原代码大致结构关键如下: function selectA ...
- jQuery全选反选插件
(function($){ $.fn.check = function(options){ var options = $.extend({ element : "input[name='n ...
- jQuery全选反选实例
1. $('#tb:checkbox').each(function(){ 每次都会执行 全选-取消操作,注意$('#tb :checkbox').prop('checked',true); tb后面 ...
- JQuery 全选 反选 获取Table 中指定td的元素值
//全选 function initTableCheckbox() { var $thr = $('table thead tr'); var $checkAllTh = $('<th>& ...
- jquery全选 反选
//全选 反选 $('#chkAll').on('click',function(){ $('input.chkbox').prop('checked',$(this).prop('checked') ...
- 关于jquery全选反选 批量删除的一点心得
废话不多说直接上代码: 下面是jsp页面的html代码: <table id="contentTable" class=""> <thead& ...
- jquery全选反选
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jQuery 全选 反选 单击行改变背景色
我先把CSS样式放出来,其实这个可以直接忽略 ;;font-size:12px;font-family:微软雅黑;} .datagrid{width:100%;} .datagird tr th{ba ...
随机推荐
- xtu数据结构 C. Ultra-QuickSort
C. Ultra-QuickSort Time Limit: 7000ms Memory Limit: 65536KB 64-bit integer IO format: %lld Java ...
- TOJ 2419: Ferry Loading II
2419: Ferry Loading II Time Limit(Common/Java):1000MS/10000MS Memory Limit:65536KByteTotal Subm ...
- TOJ 4815: 关押罪犯
4815: 关押罪犯 Time Limit(Common/Java):10004MS/12000MS Memory Limit:65536KByte Total Submit: 2 ...
- Axure:从简单搜索到联想搜索的部件制作
导读:最近一直都在整理原型部件,要说准备的最有感触的,当属搜索框无疑.搜索框的整理,前后加起来共耗时两天多.从最开始的按钮和文本框,到后来的图示,提示和联想查询.耗费了不少的心血,有必要总结一下,留个 ...
- log日志,crontab
定期备份mysql的log日志文件,保留一个月 将文件压缩为gzip格式,节省空间,备份到/home/shell/myqsl_back/目录下,保留一个月mysql_backup备份的脚本 #!/bi ...
- 【Android】android:ellipsize的使用以及一个点解决方法
EidtText和textview中内容过长的话自动换行,使用android:ellipsize与android:singleine可以解决,使只有一行. EditText不支持marquee 用法如 ...
- 【Luogu】P2220容易题(快速幂)
这题真是“容易”.呵呵呵. 参考题解:xyz32768 代码 #include<cstdio> #include<map> #include<algorithm> ...
- [HNOI2008]越狱 (组合数学)
题目描述 监狱有连续编号为 1-N 的 N 个房间,每个房间关押一个犯人,有 M 种宗教,每个犯人可能信仰其中一种.如果相邻房间的犯人的宗教相同,就可能发生越狱,求有多少种状态可能发生越狱. 输入输出 ...
- SQL Server中的@@ROWCOUNT
SQL Server中@@ROWCOUNT返回受上一语句影响的行数,返回值类型为 int 整型. 如果行数大于 20 亿,则需要使用 ROWCOUNT_BIG. @@ROWCOUNT和@@ERROR变 ...
- uva 11762 数学期望+记忆化搜索
题目大意:给一个正整数N,每次可以在不超过N的素数中随机选择一个P,如果P是N的约数,则把N变成N/p,否则N不变,问平均情况下需要多少次随机选择,才能把N变成1? 分析:根据数学期望的线性和全期望公 ...