求一段JS代码

时间：2022-09-03 10:23:45
功能是这样的，有一个表格，有很多行，现在要实现当单击某一行的任意一个单元格时，则最前面的单元格里的复选框被选中，再单击一下取消选中，而且也可以直接点击那个复选框来控制选中与取消<body>
<script language="javascript" type="text/javascript">   
function chkSelect(){
 var tr = event.srcElement.parentElement; //获取当前操作对象的父级对象
 tr.cells[0].children[0].checked=true;    //选中父对象的第一个元素-即复选框
} 
</script>
<table width="285" border="1">
  <tr onclick='chkSelect();'>
          <td><input type="checkbox" name="checkbox" value="checkbox">
    </td>
          <td>第一行第一列</td>
          <td>第一行第二列</td>
  </tr>
  <tr onclick='chkSelect();'>
    <td><input type="checkbox" name="checkbox2" value="checkbox"></td>
    <td>第二行第一列</td>
    <td>第二行第二列</td>
  </tr>
</table></body>
这段JS有缺陷，选中后是能选中  但当单击复选框按钮取消选中时会出现问题  求大神解答

27 个解决方案

#1

function chkSelect(){
 var tr = event.srcElement.parentElement; //获取当前操作对象的父级对象
 if tr.cells[0].children[0].checked 
   tr.cells[0].children[0].checked=true; //选中父对象的第一个元素-即复选框
 else
   tr.cells[0].children[0].checked=false; 
} 

#2

function chkSelect(){
 var tr = event.srcElement.parentElement; //获取当前操作对象的父级对象
 if tr.cells[0].children[0].checked 
   tr.cells[0].children[0].checked=true; //选中父对象的第一个元素-即复选框
 else
   tr.cells[0].children[0].checked=false; 
} 

#3

试了下好像不行，但感觉思路应该这样

#4

上面的代码有错误  显示缺少“（”

#5

学习一下，说不定以后会用到呢。
LZ解决了就把解决方法放上来哦

#6

最简单的方法： 


<!DOCTYPE HTML>

<html>

 <head>

  <title> My doc</title>

  <meta name="Author" content="">

  <meta name="Keywords" content="Test">

  <meta name="Description" content="">

  <script type="text/javascript">

	function select(id){

		var ckbox = document.getElementById('ck_'+id);

		if(ckbox.checked == true){

			ckbox.checked = false;

		}else{

			ckbox.checked = true;

		}


	}

  </script>

 </head>


 <body>

<table border="1" style="width:100%" cellspacing="0">

<tr onclick="select('1')" id="tr_1">

	<td><input type="checkbox" name="ck" id="ck_1"/></td>

	<td></td>

	<td></td>

	<td></td>

	<td></td>

</tr>

<tr onclick="select('2')" id="tr_2">

	<td><input type="checkbox" name="ck" id="ck_2"/></td>

	<td></td>

	<td></td>

	<td></td>

	<td></td>

</tr>

<tr onclick="select('3')" id="tr_3">

	<td><input type="checkbox" name="ck" id="ck_3"/></td>

	<td></td>

	<td></td>

	<td></td>

	<td></td>

</tr>

</table>

 </body>

</html>



#7

楼上的答案可以。

#8

function chkSelect(){
  if (event.srcElement.tagName == "TR") {
    var tr = event.srcElement.parentElement; //获取当前操作对象的父级对象
    if (tr.cells[0].children[0].checked) 
      tr.cells[0].children[0].checked=false; //选中父对象的第一个元素-即复选框
    else
      tr.cells[0].children[0].checked=true; 
  } else if (event.srcElement.tagName == "TD") {
   var tr = event.srcElement.parentElement; //获取当前操作对象的父级对象
    if (tr.cells[0].children[0].checked) 
      tr.cells[0].children[0].checked=false; //选中父对象的第一个元素-即复选框
    else
      tr.cells[0].children[0].checked=true; 
  }else if (event.srcElement.name.indexOf('checkbox', 1) > 0) {
   var obj = event.srcElement; //获取当前操作对象的父级对象
    if (obj.checked)
      obj.checked=false; //选中父对象的第一个元素-即复选框
    else
      obj.checked=true; 
  } 
 
}  

#9

6楼正解

#10

为什么我IE8 用6楼的方法直接点复选框不起作用呢

#11

6楼的不错  ，可以有点缺陷  就是专门去点击那个复选框时 复选框按钮是没有反应的，怎么办

#12

我也写了一种，不过没有楼下的精典，但是还是写出来了。所以直接帖上吧，省的白写了,Mark一下：



<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>登录</title>
<script type="text/javascript" src="jquery-1.7.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("table tr").bind("click",function(){
 if($(this).find("td").eq(0).children().first().attr("checked")!="checked"){
  $(this).find("td").eq(0).children().first().attr("checked","checked");
}else{
$(this).find("td").eq(0).children().first().removeAttr("checked");
}
});

$("input[type='checkbox']").bind("click",function(){
 if($(this).attr("checked")!="checked"){
  $(this).attr("checked","checked");
}else{
$(this).removeAttr("checked");
}
});

});
 
</script>
<table width="285" border="1">
  <tr>
  <td>
   <input type="checkbox" name="checkbox" value="checkbox">
  </td>
  <td>第一行第一列</td>
  <td>第一行第二列</td>
  </tr>
  <tr>
    <td>
     <input type="checkbox" name="checkbox" value="checkbox">
   </td>
  <td>第二行第一列</td>
  <td>第二行第二列</td>
  </tr>
</table></body>
</html>

#13

哪位大神能解决，200分送上

#14

我的这个不是解决了啊。

#15

我没有用jquery，8楼的办法完美解决，谢谢，只是代码看的不是太懂，能稍微给解释一下吗   大家的方法都不错  只是说8楼的证符合我的那种写法  结贴的时候不会忘了大家的

#16

引用 11 楼  的回复:
6楼的不错  ，可以有点缺陷  就是专门去点击那个复选框时 复选框按钮是没有反应的，怎么办

不是没反应，是触发了两次 


<!DOCTYPE HTML>

<html>

 <head>

  <title> My doc</title>

  <meta name="Author" content="wu">

  <meta name="Keywords" content="Test">

  <meta name="Description" content="">

  <script type="text/javascript">

	function select(id){

		var ckbox = document.getElementById('ck_'+id);

		if(ckbox.checked == true){

			ckbox.checked = false;

		}else{

			ckbox.checked = true;

		}


	}


	function stopBubble(e) {  

     if (e && e.stopPropagation) {

         e.stopPropagation();  

     }  

     else {

         window.event.cancelBubble = true;  

     }  

 }

  </script>

 </head>


 <body>

 <form method="post" action="">



<table border="1" style="width:100%" cellspacing="0">

<tr onclick="select('1');" id="tr_1">

	<td><input type="checkbox" name="ck" id="ck_1"  onclick="stopBubble(event)"/></td>

	<td></td>

	<td></td>

	<td></td>

	<td></td>

</tr>

<tr onclick="select('2');" id="tr_2">

	<td><input type="checkbox" name="ck" id="ck_2"  onclick="stopBubble(event)"/></td>

	<td></td>

	<td></td>

	<td></td>

	<td></td>

</tr>

<tr onclick="select('3');" id="tr_3">

	<td><input type="checkbox" name="ck" id="ck_3"  onclick="stopBubble(event)"/></td>

	<td></td>

	<td></td>

	<td></td>

	<td></td>

</tr>

</table>

 </form>

 </body>

</html>

#17

这不是挺简单的吗，用js
借用6L代码 

<!DOCTYPE HTML>

<html>

 <head>

  <title> My doc</title>

  <meta name="Author" content="">

  <meta name="Keywords" content="Test">

  <meta name="Description" content="">

  <script type="text/javascript">

    function select(tr){

        var ckbox = tr.firstChild.firstChild; //获取tr的子节点td的子节点input

        ckbox.checked = ! ckbox.checked; //checkbox的checked取反     

    }

  </script>

 </head>


 <body>

<table border="1" style="width:100%" cellspacing="0">

<tr onclick="select(this)" id="tr_1"> <!-- select 传入 tr 对象 -->

    <td><input type="checkbox" name="ck" id="ck_1"/></td>

    <td></td>

    <td></td>

    <td></td>

    <td></td>

</tr>

<tr onclick="select(this)" id="tr_2">

    <td><input type="checkbox" name="ck" id="ck_2"/></td>

    <td></td>

    <td></td>

    <td></td>

    <td></td>

</tr>

<tr onclick="select(this)" id="tr_3">

    <td><input type="checkbox" name="ck" id="ck_3"/></td>

    <td></td>

    <td></td>

    <td></td>

    <td></td>

</tr>

</table>

 </body>

</html>

#18

其实吧。jquery 这个代码是通俗易懂的。应该猜也能猜出来89不离10.
$("table tr").bind("click",function(){//tr绑定事件
if($(this).find("td").eq(0).children().first().attr("checked")!="checked"){//复选框是否是选中状态
$(this).find("td").eq(0).children().first().attr("checked","checked");//不是选中状态的话，让其选中
}else{
$(this).find("td").eq(0).children().first().removeAttr("checked");//在次点击，取消选中。
}

其余的是层次查找。你直接alert就可以看到得到什么（jquery对象或是html类型标签）

#19

16楼的也完美地解决了问题，谢谢。17楼的代码有问题，运行出错

#20

<!DOCTYPE HTML>

<html>

 <head>

  <title> My doc</title>

  <meta name="Author" content="">

  <meta name="Keywords" content="Test">

  <meta name="Description" content="">

  <script type="text/javascript">

    function select(tr){

        var obj = window.event.srcElement; //获取事件源判断一下就可以了

        if (obj.type == undefined) {

            var ckbox = tr.firstChild.firstChild; 

            ckbox.checked = ! ckbox.checked; 

        }

    }

  </script>

 </head>


 <body>

<table border="1" style="width:100%" cellspacing="0">

<tr onclick="select(this)" id="tr_1">

    <td><input type="checkbox" name="ck" id="ck_1"/></td>

    <td></td>

    <td></td>

    <td></td>

    <td></td>

</tr>

<tr onclick="select(this)" id="tr_2">

    <td><input type="checkbox" name="ck" id="ck_2"/></td>

    <td></td>

    <td></td>

    <td></td>

    <td></td>

</tr>

<tr onclick="select(this)" id="tr_3">

    <td><input type="checkbox" name="ck" id="ck_3"/></td>

    <td></td>

    <td></td>

    <td></td>

    <td></td>

</tr>

</table>

 </body>

</html>

#21

16楼的这个方法哪位大虾给解释一下  谢谢了 function stopBubble(e) {  
     if (e && e.stopPropagation) {
         e.stopPropagation();  
     }  
     else {
         window.event.cancelBubble = true;  
     }  
 }

#22

20楼的也非常完美了 ，成功解决问题，都是大神啊 ，谢谢  ，请问一下if (obj.type == undefined) {
            var ckbox = tr.firstChild.firstChild; 
            ckbox.checked = ! ckbox.checked; 
        }
这一小段是什么意思啊

#23

引用 19 楼  的回复:
16楼的也完美地解决了问题，谢谢。17楼的代码有问题，运行出错


运行出什么错，难道不支持firstChild？不支持event？

这样试试看 

<!DOCTYPE HTML>

<html>

 <head>

  <title> My doc</title>

  <meta name="Author" content="">

  <meta name="Keywords" content="Test">

  <meta name="Description" content="">

  <script type="text/javascript">

    function select(tr){

        var e = window.event || arguments[0]; //获取事件

        var obj = e.srcElement || e.target; //获取事件源

        var id = tr.id.replace(/\D+/g, ""); //获取id，本来想通过获取子节点来定位元素

         var ckbox = document.getElementById('ck_'+id); //LZ说不行就只好通过id来定位了

        if (obj != ckbox) { //如果事件源不是目标checkbox

            ckbox.checked = ! ckbox.checked; 

        }

    }

  </script>

 </head>


 <body>

<table border="1" style="width:100%" cellspacing="0">

<tr onclick="select(this)" id="tr_1">

    <td><input type="checkbox" name="ck" id="ck_1"/></td>

    <td></td>

    <td></td>

    <td></td>

    <td></td>

</tr>

<tr onclick="select(this)" id="tr_2">

    <td><input type="checkbox" name="ck" id="ck_2"/></td>

    <td></td>

    <td></td>

    <td></td>

    <td></td>

</tr>

<tr onclick="select(this)" id="tr_3">

    <td><input type="checkbox" name="ck" id="ck_3"/></td>

    <td></td>

    <td></td>

    <td></td>

    <td></td>

</tr>

</table>

 </body>

</html>

#24

看来不测试还真是不行
用firefox测试了一下，事件要传入才能取得事件源 

<!DOCTYPE HTML>

<html>

 <head>

  <title> My doc</title>

  <meta name="Author" content="">

  <meta name="Keywords" content="Test">

  <meta name="Description" content="">

  <script type="text/javascript">

    function select(tr, e){ //事件也一起传入

        var obj = e.srcElement ||  e.target; //获取事件源

        var id = tr.id.replace(/\D+/g, ""); //

        var ckbox = document.getElementById('ck_'+id); //获取目标checkbox

        if (obj != ckbox) { //如果事件源不是目标checkbox

            ckbox.checked = ! ckbox.checked; 

        }

    }

  </script>

 </head>


 <body>

<table border="1" style="width:100%" cellspacing="0">

<tr onclick="select(this, event)" id="tr_1">

    <td><input type="checkbox" name="ck" id="ck_1"/></td>

    <td></td>

    <td></td>

    <td></td>

    <td></td>

</tr>

<tr onclick="select(this, event)" id="tr_2">

    <td><input type="checkbox" name="ck" id="ck_2"/></td>

    <td></td>

    <td></td>

    <td></td>

    <td></td>

</tr>

<tr onclick="select(this, event)" id="tr_3">

    <td><input type="checkbox" name="ck" id="ck_3"/></td>

    <td></td>

    <td></td>

    <td></td>

    <td></td>

</tr>

</table>

 </body>

</html>

#25

该回复于2012-08-02 14:57:27被版主删除

#26

引用 16 楼  的回复:
引用 11 楼  的回复:

6楼的不错  ，可以有点缺陷  就是专门去点击那个复选框时 复选框按钮是没有反应的，怎么办

不是没反应，是触发了两次
HTML code

<!DOCTYPE HTML>
<html>
 <head>
  <title> My doc</title>
  <meta name="Author" content="wu">
  <meta name="K……

就是这样啊

#27

结贴了，感谢大家的帮助

#1

function chkSelect(){
 var tr = event.srcElement.parentElement; //获取当前操作对象的父级对象
 if tr.cells[0].children[0].checked 
   tr.cells[0].children[0].checked=true; //选中父对象的第一个元素-即复选框
 else
   tr.cells[0].children[0].checked=false; 
} 

#2

function chkSelect(){
 var tr = event.srcElement.parentElement; //获取当前操作对象的父级对象
 if tr.cells[0].children[0].checked 
   tr.cells[0].children[0].checked=true; //选中父对象的第一个元素-即复选框
 else
   tr.cells[0].children[0].checked=false; 
} 

#3

试了下好像不行，但感觉思路应该这样

#4

上面的代码有错误  显示缺少“（”

#5

学习一下，说不定以后会用到呢。
LZ解决了就把解决方法放上来哦

#6

最简单的方法： 


<!DOCTYPE HTML>

<html>

 <head>

  <title> My doc</title>

  <meta name="Author" content="">

  <meta name="Keywords" content="Test">

  <meta name="Description" content="">

  <script type="text/javascript">

	function select(id){

		var ckbox = document.getElementById('ck_'+id);

		if(ckbox.checked == true){

			ckbox.checked = false;

		}else{

			ckbox.checked = true;

		}


	}

  </script>

 </head>


 <body>

<table border="1" style="width:100%" cellspacing="0">

<tr onclick="select('1')" id="tr_1">

	<td><input type="checkbox" name="ck" id="ck_1"/></td>

	<td></td>

	<td></td>

	<td></td>

	<td></td>

</tr>

<tr onclick="select('2')" id="tr_2">

	<td><input type="checkbox" name="ck" id="ck_2"/></td>

	<td></td>

	<td></td>

	<td></td>

	<td></td>

</tr>

<tr onclick="select('3')" id="tr_3">

	<td><input type="checkbox" name="ck" id="ck_3"/></td>

	<td></td>

	<td></td>

	<td></td>

	<td></td>

</tr>

</table>

 </body>

</html>



#7

楼上的答案可以。

#8

function chkSelect(){
  if (event.srcElement.tagName == "TR") {
    var tr = event.srcElement.parentElement; //获取当前操作对象的父级对象
    if (tr.cells[0].children[0].checked) 
      tr.cells[0].children[0].checked=false; //选中父对象的第一个元素-即复选框
    else
      tr.cells[0].children[0].checked=true; 
  } else if (event.srcElement.tagName == "TD") {
   var tr = event.srcElement.parentElement; //获取当前操作对象的父级对象
    if (tr.cells[0].children[0].checked) 
      tr.cells[0].children[0].checked=false; //选中父对象的第一个元素-即复选框
    else
      tr.cells[0].children[0].checked=true; 
  }else if (event.srcElement.name.indexOf('checkbox', 1) > 0) {
   var obj = event.srcElement; //获取当前操作对象的父级对象
    if (obj.checked)
      obj.checked=false; //选中父对象的第一个元素-即复选框
    else
      obj.checked=true; 
  } 
 
}  

#9

6楼正解

#10

为什么我IE8 用6楼的方法直接点复选框不起作用呢

#11

6楼的不错  ，可以有点缺陷  就是专门去点击那个复选框时 复选框按钮是没有反应的，怎么办

#12

我也写了一种，不过没有楼下的精典，但是还是写出来了。所以直接帖上吧，省的白写了,Mark一下：



<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>登录</title>
<script type="text/javascript" src="jquery-1.7.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("table tr").bind("click",function(){
 if($(this).find("td").eq(0).children().first().attr("checked")!="checked"){
  $(this).find("td").eq(0).children().first().attr("checked","checked");
}else{
$(this).find("td").eq(0).children().first().removeAttr("checked");
}
});

$("input[type='checkbox']").bind("click",function(){
 if($(this).attr("checked")!="checked"){
  $(this).attr("checked","checked");
}else{
$(this).removeAttr("checked");
}
});

});
 
</script>
<table width="285" border="1">
  <tr>
  <td>
   <input type="checkbox" name="checkbox" value="checkbox">
  </td>
  <td>第一行第一列</td>
  <td>第一行第二列</td>
  </tr>
  <tr>
    <td>
     <input type="checkbox" name="checkbox" value="checkbox">
   </td>
  <td>第二行第一列</td>
  <td>第二行第二列</td>
  </tr>
</table></body>
</html>

#13

哪位大神能解决，200分送上

#14

我的这个不是解决了啊。

#15

我没有用jquery，8楼的办法完美解决，谢谢，只是代码看的不是太懂，能稍微给解释一下吗   大家的方法都不错  只是说8楼的证符合我的那种写法  结贴的时候不会忘了大家的

#16

引用 11 楼  的回复:
6楼的不错  ，可以有点缺陷  就是专门去点击那个复选框时 复选框按钮是没有反应的，怎么办

不是没反应，是触发了两次 


<!DOCTYPE HTML>

<html>

 <head>

  <title> My doc</title>

  <meta name="Author" content="wu">

  <meta name="Keywords" content="Test">

  <meta name="Description" content="">

  <script type="text/javascript">

	function select(id){

		var ckbox = document.getElementById('ck_'+id);

		if(ckbox.checked == true){

			ckbox.checked = false;

		}else{

			ckbox.checked = true;

		}


	}


	function stopBubble(e) {  

     if (e && e.stopPropagation) {

         e.stopPropagation();  

     }  

     else {

         window.event.cancelBubble = true;  

     }  

 }

  </script>

 </head>


 <body>

 <form method="post" action="">



<table border="1" style="width:100%" cellspacing="0">

<tr onclick="select('1');" id="tr_1">

	<td><input type="checkbox" name="ck" id="ck_1"  onclick="stopBubble(event)"/></td>

	<td></td>

	<td></td>

	<td></td>

	<td></td>

</tr>

<tr onclick="select('2');" id="tr_2">

	<td><input type="checkbox" name="ck" id="ck_2"  onclick="stopBubble(event)"/></td>

	<td></td>

	<td></td>

	<td></td>

	<td></td>

</tr>

<tr onclick="select('3');" id="tr_3">

	<td><input type="checkbox" name="ck" id="ck_3"  onclick="stopBubble(event)"/></td>

	<td></td>

	<td></td>

	<td></td>

	<td></td>

</tr>

</table>

 </form>

 </body>

</html>

#17

这不是挺简单的吗，用js
借用6L代码 

<!DOCTYPE HTML>

<html>

 <head>

  <title> My doc</title>

  <meta name="Author" content="">

  <meta name="Keywords" content="Test">

  <meta name="Description" content="">

  <script type="text/javascript">

    function select(tr){

        var ckbox = tr.firstChild.firstChild; //获取tr的子节点td的子节点input

        ckbox.checked = ! ckbox.checked; //checkbox的checked取反     

    }

  </script>

 </head>


 <body>

<table border="1" style="width:100%" cellspacing="0">

<tr onclick="select(this)" id="tr_1"> <!-- select 传入 tr 对象 -->

    <td><input type="checkbox" name="ck" id="ck_1"/></td>

    <td></td>

    <td></td>

    <td></td>

    <td></td>

</tr>

<tr onclick="select(this)" id="tr_2">

    <td><input type="checkbox" name="ck" id="ck_2"/></td>

    <td></td>

    <td></td>

    <td></td>

    <td></td>

</tr>

<tr onclick="select(this)" id="tr_3">

    <td><input type="checkbox" name="ck" id="ck_3"/></td>

    <td></td>

    <td></td>

    <td></td>

    <td></td>

</tr>

</table>

 </body>

</html>

#18

其实吧。jquery 这个代码是通俗易懂的。应该猜也能猜出来89不离10.
$("table tr").bind("click",function(){//tr绑定事件
if($(this).find("td").eq(0).children().first().attr("checked")!="checked"){//复选框是否是选中状态
$(this).find("td").eq(0).children().first().attr("checked","checked");//不是选中状态的话，让其选中
}else{
$(this).find("td").eq(0).children().first().removeAttr("checked");//在次点击，取消选中。
}

其余的是层次查找。你直接alert就可以看到得到什么（jquery对象或是html类型标签）

#19

16楼的也完美地解决了问题，谢谢。17楼的代码有问题，运行出错

#20

<!DOCTYPE HTML>

<html>

 <head>

  <title> My doc</title>

  <meta name="Author" content="">

  <meta name="Keywords" content="Test">

  <meta name="Description" content="">

  <script type="text/javascript">

    function select(tr){

        var obj = window.event.srcElement; //获取事件源判断一下就可以了

        if (obj.type == undefined) {

            var ckbox = tr.firstChild.firstChild; 

            ckbox.checked = ! ckbox.checked; 

        }

    }

  </script>

 </head>


 <body>

<table border="1" style="width:100%" cellspacing="0">

<tr onclick="select(this)" id="tr_1">

    <td><input type="checkbox" name="ck" id="ck_1"/></td>

    <td></td>

    <td></td>

    <td></td>

    <td></td>

</tr>

<tr onclick="select(this)" id="tr_2">

    <td><input type="checkbox" name="ck" id="ck_2"/></td>

    <td></td>

    <td></td>

    <td></td>

    <td></td>

</tr>

<tr onclick="select(this)" id="tr_3">

    <td><input type="checkbox" name="ck" id="ck_3"/></td>

    <td></td>

    <td></td>

    <td></td>

    <td></td>

</tr>

</table>

 </body>

</html>

#21

16楼的这个方法哪位大虾给解释一下  谢谢了 function stopBubble(e) {  
     if (e && e.stopPropagation) {
         e.stopPropagation();  
     }  
     else {
         window.event.cancelBubble = true;  
     }  
 }

#22

20楼的也非常完美了 ，成功解决问题，都是大神啊 ，谢谢  ，请问一下if (obj.type == undefined) {
            var ckbox = tr.firstChild.firstChild; 
            ckbox.checked = ! ckbox.checked; 
        }
这一小段是什么意思啊

#23

引用 19 楼  的回复:
16楼的也完美地解决了问题，谢谢。17楼的代码有问题，运行出错


运行出什么错，难道不支持firstChild？不支持event？

这样试试看 

<!DOCTYPE HTML>

<html>

 <head>

  <title> My doc</title>

  <meta name="Author" content="">

  <meta name="Keywords" content="Test">

  <meta name="Description" content="">

  <script type="text/javascript">

    function select(tr){

        var e = window.event || arguments[0]; //获取事件

        var obj = e.srcElement || e.target; //获取事件源

        var id = tr.id.replace(/\D+/g, ""); //获取id，本来想通过获取子节点来定位元素

         var ckbox = document.getElementById('ck_'+id); //LZ说不行就只好通过id来定位了

        if (obj != ckbox) { //如果事件源不是目标checkbox

            ckbox.checked = ! ckbox.checked; 

        }

    }

  </script>

 </head>


 <body>

<table border="1" style="width:100%" cellspacing="0">

<tr onclick="select(this)" id="tr_1">

    <td><input type="checkbox" name="ck" id="ck_1"/></td>

    <td></td>

    <td></td>

    <td></td>

    <td></td>

</tr>

<tr onclick="select(this)" id="tr_2">

    <td><input type="checkbox" name="ck" id="ck_2"/></td>

    <td></td>

    <td></td>

    <td></td>

    <td></td>

</tr>

<tr onclick="select(this)" id="tr_3">

    <td><input type="checkbox" name="ck" id="ck_3"/></td>

    <td></td>

    <td></td>

    <td></td>

    <td></td>

</tr>

</table>

 </body>

</html>

#24

看来不测试还真是不行
用firefox测试了一下，事件要传入才能取得事件源 

<!DOCTYPE HTML>

<html>

 <head>

  <title> My doc</title>

  <meta name="Author" content="">

  <meta name="Keywords" content="Test">

  <meta name="Description" content="">

  <script type="text/javascript">

    function select(tr, e){ //事件也一起传入

        var obj = e.srcElement ||  e.target; //获取事件源

        var id = tr.id.replace(/\D+/g, ""); //

        var ckbox = document.getElementById('ck_'+id); //获取目标checkbox

        if (obj != ckbox) { //如果事件源不是目标checkbox

            ckbox.checked = ! ckbox.checked; 

        }

    }

  </script>

 </head>


 <body>

<table border="1" style="width:100%" cellspacing="0">

<tr onclick="select(this, event)" id="tr_1">

    <td><input type="checkbox" name="ck" id="ck_1"/></td>

    <td></td>

    <td></td>

    <td></td>

    <td></td>

</tr>

<tr onclick="select(this, event)" id="tr_2">

    <td><input type="checkbox" name="ck" id="ck_2"/></td>

    <td></td>

    <td></td>

    <td></td>

    <td></td>

</tr>

<tr onclick="select(this, event)" id="tr_3">

    <td><input type="checkbox" name="ck" id="ck_3"/></td>

    <td></td>

    <td></td>

    <td></td>

    <td></td>

</tr>

</table>

 </body>

</html>

#25

该回复于2012-08-02 14:57:27被版主删除

#26

引用 16 楼  的回复:
引用 11 楼  的回复:

6楼的不错  ，可以有点缺陷  就是专门去点击那个复选框时 复选框按钮是没有反应的，怎么办

不是没反应，是触发了两次
HTML code

<!DOCTYPE HTML>
<html>
 <head>
  <title> My doc</title>
  <meta name="Author" content="wu">
  <meta name="K……

就是这样啊

#27

结贴了，感谢大家的帮助
标签：

相关文章