jQuery实现表格点击行(tr)选中复选框

最新推荐文章于 2022-12-11 12:48:13 发布

weixin_34309435

最新推荐文章于 2022-12-11 12:48:13 发布

阅读量501

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/junn/blog/109021

版权

为什么80%的码农都做不了架构师？>>>

主要Js代码：

 $(".list tr").slice(1).each(function(){

  var p = this;

  $(this).children().slice(1).click(function(){

   $($(p).children()[0]).children().each(function(){

    if(this.type=="checkbox"){

     if(!this.checked){

      this.checked = true;

     }else{

      this.checked = false;

     }

    }

   });

  });

 });

1）只要table 的 class="list" ,就能实现该功能

2）$(".list tr").slice(1).each 意思是不要对表列头添加事件

3）$(this).children()..slice(1)是核心主要为了过滤掉复选框所在的td的点击,否则在点复选框时将会起冲突

示例代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

<style type="text/css">

.seldColor{

 background-color:#FF0000;

}

</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){

 $(".list tr").slice(1).each(function(){

  var p = this;

  $(this).children().slice(1).click(function(){

   $($(p).children()[0]).children().each(function(){

    if(this.type=="checkbox"){

     if(!this.checked){

      this.checked = true;

      //$(p).children()[0].style.backgroundColor="#FFCC80";

      $(this).parent().parent().addClass("seldColor");

     }else{

      this.checked = false;

      //$(p).children()[0].style.backgroundColor="#FFFFFF";

      $(this).parent().parent().removeClass("seldColor");

     }

    }

   });

  });

 });

});

</script>

</head>

<body>

<table align="center" width="90%" border="1" class="list">

 <tr><td width="20"><input type="checkbox" /></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>

 <tr><td width="20"><input type="checkbox" /></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>

 <tr><td width="20"><input type="checkbox" /></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>

 <tr><td width="20"><input type="checkbox" /></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>

 <tr><td width="20"><input type="checkbox" /></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>

 <tr><td width="20"><input type="checkbox" /></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>

</table>

</body>

</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>jquery</title> <style type='text/css'> .tr1{ background:blue; } .tr2{ background:green; } .hand{ cursor:hand; } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> <script type="text/javascript"> var form_sub= new Function(); var check_all=new Function(); var box_value=''; $(document).ready(function (){ $("#t1").find("tr").addClass("hand");//为tr添加样式，鼠标移上去成手的形状 //循环每个tr行，添加click事件 $("#t1").find("tr").live("click",function (){ if(this.rowIndex==0)return;//标题行不作任何操作 if($(this).find("input").attr("checked")=='checked'){//已选中的行取消选中 $(this).find("input").attr("checked",false); $(this).removeClass("tr1");//删除行样式 $(this).removeClass("tr2"); }else{//未选中的行，进行选中 $(this).find("input").attr("checked",true); if(this.rowIndex%2==0){//判断奇、偶行数，添加不同的样式class $(this).addClass("tr1"); }else{ $(this).addClass("tr2"); } } });

//表单提交时，取到所有选中checkbox值 form_sub= function (){ $("input[type='checkbox'][name='box']").each(function(){ if(this.checked){ box_value+=this.value+","; } });

alert("checbox's value = ("+box_value+")"); }

//全选 check_all =function (obj){ $("input[type='checkbox'][name='box']").attr("checked",obj.checked); } }); </script> </head> <body> <table id='t1' width="50%" align='center' border='1' cellpadding='0' cellspacing='0'> <tr><td><input type='checkbox' name='box1' id='box1' value='' onclick='check_all(this)'/></td><td>名称 </td><td>年龄</td></tr> <tr><td><input type='checkbox' name='box' value='1'/></td><td>checkbox1</td><td>10</td></tr> <tr><td><input type='checkbox' name='box' value='2'/></td><td>checkbox2</td><td>20</td></tr> <tr><td><input type='checkbox' name='box' value='3'/></td><td>checkbox3</td><td>30</td></tr> <tr><td><input type='checkbox' name='box' value='4'/></td><td>checkbox4</td><td>40</td></tr> </table> <p> <input style="margin-left:650px;" type='button' onclick='form_sub()' value='提交'/>

</body> </html>

其他参考：JQuery点击行（tr）实现checkBox选中 http://www.cnblogs.com/zhuiyi/archive/2011/06/29/2092836.html

转载于:https://my.oschina.net/junn/blog/109021