用js实现一个简单特效

大家都做过调查问卷吧，一行是题目，下一行是4个选项，这样一题一题的列出来，
选项这行是这样四个单选按钮横着排列，4选1，一开始都没有选中，现在我要一个效果，就是一但选择了其中一个按钮后，整个这一行就高亮显示或换个颜色显示来突出一下，这个功能用js应该可以实现的吧？求那位js高手给我讲讲？

解决方案 »

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

首先你要会CSS，当点击按钮的时候，把那一行的CSS样式是设置为你需要的就可以了
<script>
function doit(){
var n = this.name;
var a = document.getElementsByName(n);
var b = false;
for(var i=0;i<a.length;i++){
if(a[i].checked){
b = true; break;
}
}
this.parentNode.style.background = b?"gray":"transparent";
}
window.onload =function(){
var a = document.getElementsByTagName("input");
for(var i=0;i<a.length;i++){
if(a[i].type="checkbox"){
a[i].onclick = doit;
}
}
}
</script>
<div>xx</div>
<div>
<input type="checkbox" name="ck" value="1">
<input type="checkbox" name="ck" value="2">
<input type="checkbox" name="ck" value="3">
<input type="checkbox" name="ck" value="4">
</div>
<div>xx</div>
<div>
<input type="checkbox" name="ck1" value="1">
<input type="checkbox" name="ck1" value="2">
<input type="checkbox" name="ck1" value="3">
<input type="checkbox" name="ck1" value="4">
</div>
<div>xx</div>
<div>
<input type="checkbox" name="ck2" value="1">
<input type="checkbox" name="ck2" value="2">
<input type="checkbox" name="ck2" value="3">
<input type="checkbox" name="ck2" value="4">
</div>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js" type="text/javascript"></script>
    <style type="text/css">
        .light{ color:red;background-color:#8ADEFF;}
        li{ list-style-type:none;float:left;width:200px;cursor:pointer;}
        input{cursor:pointer;}
    </style>
    <script type="text/javascript">
        $(function () {
            $("#ulQuestion1 :radio").click(function () {
                $(this).parent().addClass("light").siblings().removeClass("light");
            });
        })
    </script>
</head>
<body>
    <div>你是老几?</div>
    <ul id="ulQuestion1" >
        <li><input name="op" type="radio" value="1" />1</li>
        <li><input name="op" type="radio" value="2" />2</li>
        <li><input name="op" type="radio" value="3" />3</li>
        <li><input name="op" type="radio" value="4" />4</li>
    </ul>
    
</body>
</html>
兄弟，如果选项在table里的4个td里面，怎么实现选择一个td，同一行的四个都亮了？
<script>
function doit(){
    var n = this.name;
    var a = document.getElementsByName(n);
    var b = false;
    for(var i=0;i<a.length;i++){
        if(a[i].checked){
            b = true; break;
        }
    }
    this.parentNode.parentNode.style.background = b?"gray":"transparent";
}
window.onload =function(){
    var a = document.getElementsByTagName("input");
    for(var i=0;i<a.length;i++){
        if(a[i].type="checkbox"){
            a[i].onclick = doit;
        }
    }
}
</script>
<body style="margin: 0px;">
<table cellpadding="0" cellspacing="0" border="1">
<tr>
<td colspan="4">xx</td>
</tr>
<tr>
<td><input type="checkbox" name="ck" value="1"></td>
<td><input type="checkbox" name="ck" value="2"></td>
<td><input type="checkbox" name="ck" value="3"></td>
<td><input type="checkbox" name="ck" value="4"></td>
</tr>
<tr>
<td colspan="4">xx</td>
</tr>
<tr>
<td><input type="checkbox" name="ck1" value="1"></td>
<td><input type="checkbox" name="ck1" value="2"></td>
<td><input type="checkbox" name="ck1" value="3"></td>
<td><input type="checkbox" name="ck1" value="4"></td>
</tr>
<tr>
<td colspan="4">xx</td>
</tr>
<tr>
<td><input type="checkbox" name="ck2" value="1"></td>
<td><input type="checkbox" name="ck2" value="2"></td>
<td><input type="checkbox" name="ck2" value="3"></td>
<td><input type="checkbox" name="ck2" value="4"></td>
</tr>
</table>
</body>
你那个怎么实现的？JQuery不太会用啊
只要把我的代码复制粘贴到一个空白的html文件中, 再保存为 a.html, 双击执行就好了嘛 .
我是想要一种解决思路，还要结合我的项目去修改的，jquery这个东西我完全不懂它的实现原理，不知道怎么去改
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js" type="text/javascript"></script>
    <style type="text/css">
        .light{ color:red;background-color:#8ADEFF;}
        li{ list-style-type:none;float:left;width:200px;cursor:pointer;}
        input{cursor:pointer;}
    </style>
    <script type="text/javascript">
        //上面的<script src="http://ajax.googleapis.></script>是引入google里面的jquery.js文件，你项目里原样照抄就好了。
        //下面这个$(function () {}）相当于 window.onload, 但是比它加载的时刻会快一点。
        $(function () {
            //为id="ulQuestion1"元素下的所有单选钮注册click事件
            $("#ulQuestion1 :radio").click(function () {
                //被单击的单选钮的父元素将添加样式light, 并将它的父元素的兄弟元素移除样式light
                $(this).parent().addClass("light").siblings().removeClass("light");
            });
        })
    </script>
</head>
<body>
    <div>你是老几?</div>
    <ul id="ulQuestion1" >
        <li><input name="op" type="radio" value="1" />1</li>
        <li><input name="op" type="radio" value="2" />2</li>
        <li><input name="op" type="radio" value="3" />3</li>
        <li><input name="op" type="radio" value="4" />4</li>
    </ul>
    
</body>
</html>
上面的注释够清楚了吧, 只要你学会了jquery，思路比原生的javascript要更清晰更快捷
有好的jquery教程吗？推荐一下
百度一下或者买书吧, jquery的教程到处都是. www.w3cschool.com比较有规范点.
jquery入门就看API和小例子看书完全是浪费时间思路就是给每个radio注册一个onchange
里面通过触发事件的这个radio去获取radio所在的tr 改变tr的style.backgroundColor