表格嵌套复选框，选择复选框该行变色

[0轰隆隆0]

<table width="150" border="1" cellpadding="1" cellspacing="1">
  <tr>
    <td><input type="checkbox" name="checkbox" value="01"></td>
    <td>11</td>
    <td>12</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="checkbox" value="02"></td>
    <td>21</td>
    <td>22</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="checkbox" value="03"></td>
    <td>31</td>
    <td>32</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="checkbox" value="04"></td>
    <td>41</td>
    <td>42</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="checkbox" value="05"></td>
    <td>51</td>
    <td>52</td>
  </tr>
</table>

以上是一个5行3列的表格，每一行第一列有一个复选框

现在的需求是：当选中复选框时，该行变色（bgcolor="#CCCCCC"），取消选择时又恢复原来的颜色

可以根据checkbox 的 value 来定位！

代码越简单越好，择优给分

[monexus]

jQuery写法

$(input[name="checkbox"]').click(function(){
  var tr = $(this).paren('tr');
  $(this).val() ? tr.attr('bgColor', '#CCCCCC') : tr.attr('bgColor', ');
});

[monexus]

漏了个引号
$(this).val() ? tr.attr('bgColor', '#CCCCCC') : tr.attr('bgColor', '');

[hookee]

<script>
function checkit(evt){
   	var obj = window.event?event.srcElement:evt.target;
   	obj.parentNode.parentNode.style.backgroundColor= obj.checked?'#CCC':'#FFF';
}
window.onload = function(){
   var ck = document.getElementsByName("checkbox");
   for(var i=0;i<ck.length;i++) ck[i].onclick = checkit;	
}
</script>
<table width="150" border="1" cellpadding="1" cellspacing="1">
  <tr>
    <td><input type="checkbox" name="checkbox" value="01"></td>
    <td>11</td>
    <td>12</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="checkbox" value="02"></td>
    <td>21</td>
    <td>22</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="checkbox" value="03"></td>
    <td>31</td>
    <td>32</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="checkbox" value="04"></td>
    <td>41</td>
    <td>42</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="checkbox" value="05"></td>
    <td>51</td>
    <td>52</td>
  </tr>
</table>

[0轰隆隆0]

谢谢楼上两位，代码单独拿出来都可以生效

但是放到我们的项目里面就不管用了，也不提示脚本错误，很是头痛

[cuixiping]

兼容IE和Firefox

<script language="javascript">
function d(e){
    var o=e.target||event.srcElement;
    if(o.type=="checkbox")o.parentNode.parentNode.bgColor=o.checked?'#CCCCCC':'';
}
</script>
<table width="150" border="1" cellpadding="1" cellspacing="1" onclick="d(event)">
  <tr>
    <td><input type="checkbox"></td>
    <td>11</td>
    <td>12</td>
  </tr>
  <tr>
    <td><input type="checkbox"></td>
    <td>21</td>
    <td>22</td>
  </tr>
  <tr>
    <td><input type="checkbox"></td>
    <td>31</td>
    <td>32</td>
  </tr>
  <tr>
    <td><input type="checkbox"></td>
    <td>41</td>
    <td>42</td>
  </tr>
  <tr>
    <td><input type="checkbox"></td>
    <td>51</td>
    <td>52</td>
  </tr>
</table>

[0轰隆隆0]

[Quote=引用 5 楼 cuixiping 的回复:]
兼容IE和Firefox

HTML code<script language="javascript">
function d(e){
var o=e.target||event.srcElement;
if(o.type=="checkbox")o.parentNode.parentNode.bgColor=o.checked?'#CCCCCC':'';
}
</script>
<table width="150" border="1" cellpadding="1" cellspacing="1" onclick="d(event)">
<tr>
<td><input type="checkbox"></td>
<td>11</td>
<td>12</td>
</tr>
<tr>
<…
[/Quote]

开发使用的是IE，放进去还是不管用

我将方法进行改造，得到一下结果：

<script language="javascript">
function d(e){
alert(e.target); // 选取和取消选取 得到都是 undefind
alert(event.srcElement); //选取和取消选取 得到 [obect]
alert(o.parentNode.parentNode.bgColor); //选取和取消选取 ,脚本发生错误： parentNode 为空或不是对象
var o=e.target||event.srcElement;
if(o.type=="checkbox")o.parentNode.parentNode.bgColor=o.checked?'#CCCCCC':'';
}
</script>

[william3033]

[Quote=引用 3 楼 hookee 的回复:]
HTML code
<script>
function checkit(evt){
var obj = window.event?event.srcElement:evt.target;
obj.parentNode.parentNode.style.backgroundColor= obj.checked?'#CCC':'#FFF';
}
window.onload = function(){
var ck = document.getElementsByName("checkbox");
for(var i=0;i<ck.length;i++) ck[i].onclick = checkit;
}
</script>
<table width="150" border="1" cellpadding="1" ce…
[/Quote]
不会吧，这个写的好的很啊。

[lggw925110]

$("input[name='checkbox']").click(function(){
var tr = $(this).paren("tr");
$(this).val() ? tr.attr("bgColor", "#CCCCCC") : tr.attr("#CCCCCC", "");
});

[0轰隆隆0]

[Quote=引用 3 楼 hookee 的回复:]
HTML code
<script>
function checkit(evt){
var obj = window.event?event.srcElement:evt.target;
obj.parentNode.parentNode.style.backgroundColor= obj.checked?'#CCC':'#FFF';
}
window.onload = function(){
var ck = document.getElementsByName("checkbox");
for(var i=0;i<ck.length;i++) ck[i].onclick = checkit;
}
</script>
<table width="150" border="1" cellpadding="1" ce…
[/Quote]

单独放出来可以生效，放进项目里面无效

我也将方法进行改造，得到：

<script>
function checkit(evt){

alert("to1:"+window.event); //选取和取消选取 得到 [obect]
alert("to1:"+event.srcElement); //选取和取消选取 得到 [obect]
alert("to1:"+evt.target); // 脚本发生错误： target 为空或不是对象

var obj = window.event?event.srcElement:evt.target;
obj.parentNode.parentNode.style.backgroundColor= obj.checked?'#CCC':'#FFF';
}
window.onload = function(){

alert("to2:"+document.getElementsByName("selectallid")); //每次打开页面执行，得到：[obect]


var ck = document.getElementsByName("selectallid");
for(var i=0;i<ck.length;i++) ck[i].onclick = checkit;
}
</script>

[0轰隆隆0]

顶上去看看

[danier9687]

支持一楼的写法

[monexus]

搞错了checkbox不是val()

$(input[name="checkbox"]').click(function(){
  var tr = $(this).paren('tr');
  $(this).attr('checked') ? tr.attr('bgColor', '#CCCCCC') : tr.attr('bgColor', '');
});