求一段JS代码

功能是这样的，有一个表格，有很多行，现在要实现当单击某一行的任意一个单元格时，则最前面的单元格里的复选框被选中，再单击一下取消选中，而且也可以直接点击那个复选框来控制选中与取消<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有缺陷，选中后是能选中  但当单击复选框按钮取消选中时会出现问题  求大神解答

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

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;
}
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;
}
最简单的方法：<!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>
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;
  }

}
我也写了一种，不过没有楼下的精典，但是还是写出来了。所以直接帖上吧，省的白写了,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>
我没有用jquery，8楼的办法完美解决，谢谢，只是代码看的不是太懂，能稍微给解释一下吗   大家的方法都不错  只是说8楼的证符合我的那种写法  结贴的时候不会忘了大家的
不是没反应，是触发了两次<!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>
这不是挺简单的吗，用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"> 
    <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>
其实吧。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类型标签）
<!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>
16楼的这个方法哪位大虾给解释一下  谢谢了 function stopBubble(e) {
     if (e && e.stopPropagation) {
         e.stopPropagation();
     }
     else {
         window.event.cancelBubble = true;
     }
}
20楼的也非常完美了，成功解决问题，都是大神啊，谢谢  ，请问一下if (obj.type == undefined) {
            var ckbox = tr.firstChild.firstChild;
            ckbox.checked = ! ckbox.checked;
        }
这一小段是什么意思啊
运行出什么错，难道不支持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>
看来不测试还真是不行
用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>