如何让<input name="radio" value="XX" onclick=变色()>

Question

<input type="radio" name="a" value="A" onclick=变色(this)>
<input type="radio" name="a" value="B" onclick=变色(this)>
<input type="radio" name="a" value="C" onclick=变色(this)>
<input type="radio" name="a" value="D" onclick=变色(this)>
<script language=javascript>
var pre, now;
function 变色(obj){
now = obj;
now.style.background = "#f00";
if(pre) pre.style.background = "#fff";
pre = now;
}
</script>

Answer 1

颜色修改后,用表单重置不了.还有不要修改背景颜色.有没有修改value的字的颜色的方法?
就是A,B,C,D的颜色.
而且如果有2组
<input type="radio" name="a" value="A" onclick=变色(this)>
<input type="radio" name="a" value="B" onclick=变色(this)>
<input type="radio" name="a" value="C" onclick=变色(this)>
<input type="radio" name="a" value="D" onclick=变色(this)>
<script language=javascript>
<input type="radio" name="b" value="A" onclick=变色(this)>
<input type="radio" name="b" value="B" onclick=变色(this)>
<input type="radio" name="b" value="C" onclick=变色(this)>
<input type="radio" name="b" value="D" onclick=变色(this)>
<script language=javascript>
就会出现当选中b里面的某项,那么a的颜色也会消失.function 变色(obj,name){

Answer 2

<div>
<input type="radio" name="a" value="A" onclick=变色(this)><span> A</span>
<input type="radio" name="a" value="B" onclick=变色(this)><span> B</span>
<input type="radio" name="a" value="C" onclick=变色(this)><span> C</span>
<input type="radio" name="a" value="D" onclick=变色(this)><span> D</span>
</div>
<div>
<input type="radio" name="b" value="A" onclick=变色(this)><span> A</span>
<input type="radio" name="b" value="B" onclick=变色(this)><span> B</span>
<input type="radio" name="b" value="C" onclick=变色(this)><span> C</span>
<input type="radio" name="b" value="D" onclick=变色(this)><span> D</span>
</div>
<script language=javascript>
function 变色(obj){
obj.parentNode.now = obj;
obj.parentNode.now.nextSibling.style.color = "#00f";
if(obj.parentNode.pre) obj.parentNode.pre.nextSibling.style.color = "#000";
obj.parentNode.pre = obj.parentNode.now;
}
</script>

Answer 3

谢谢你了.你发给我的代码可以用.但是
我放到自己的上面,楞是没发现哪里错了?
说传递的对象为空parentNode.pre.nextSibling.style<div>
<tr><td><input type="radio" name="answer1" value="A" onClick=color_change(this)>  
               <span> A、这就是我喜欢的工作</span></td>                         
              <td><input type="radio" name="answer1" value="B" onClick=color_change(this)>  
               <span> B、有兴趣，我愿意继续做这份工作</span></td>                      
              <td><input type="radio" name="answer1" value="C" onClick=color_change(this)>  
               <span> C、说不上兴趣，但是是我的工作</span></td>                       
                <td><input type="radio" name="answer1" value="D" onClick=color_change(this)>  
              <span> D、不感兴趣，想换一个岗位</span></td>
 </tr>
 </div>
 <div>  
<tr><td height="24px"></td></tr>
<tr><td colspan="4" align="left" class="9p"><strong>2、你在公司发展的职业倾向是: </strong></td></tr>
<tr><td><input type="radio" name="answer2" value="A" onClick=color_change(this)>  
              <span>  A、希望在目前这个方向一直干下去 </span></td>                         
              <td><input type="radio" name="answer2" value="B" onClick=color_change(this)>  
             <span>   B、希望在公司有其它机会</span></td>                      
              <td><input type="radio" name="answer2" value="C" onClick=color_change(this)>  
             <span>   C、有合适的机会可以考虑出去发展</span> </td>                       
                <td><input type="radio" name="answer2" value="D" onClick=color_change(this)>  
             <span>   D、目前没有考虑</span></td>
 </tr>
 </div><script language=javascript>
function color_change(obj){
    obj.parentNode.now = obj;
    obj.parentNode.now.nextSibling.style.color = "#00f";
    if(obj.parentNode.pre) obj.parentNode.pre.nextSibling.style.color = "#000";
    obj.parentNode.pre = obj.parentNode.now;
}
</script>
麻烦你拉.真不好意思.

Answer 4

<table>
            <tr><td><input type="radio" name="answer1" value="A" onClick=color_change(this)><span> A、这就是我喜欢的工作</span></td>                         
                 <td><input type="radio" name="answer1" value="B" onClick=color_change(this)><span> B、有兴趣，我愿意继续做这份工作</span></td>                      
                 <td><input type="radio" name="answer1" value="C" onClick=color_change(this)><span> C、说不上兴趣，但是是我的工作</span></td>                                          
                <td><input type="radio" name="answer1" value="D" onClick=color_change(this)><span> D、不感兴趣，想换一个岗位</span></td>
             </tr>         
            <tr><td colspan="4" height="24px"></td></tr>
            <tr><td colspan="4" align="left" class="9p"><strong>2、你在公司发展的职业倾向是: </strong></td></tr>
            <tr><td><input type="radio" name="answer2" value="A" onClick=color_change(this)><span>  A、希望在目前这个方向一直干下去 </span></td>                         
                 <td><input type="radio" name="answer2" value="B" onClick=color_change(this)><span>   B、希望在公司有其它机会</span></td>                      
                 <td><input type="radio" name="answer2" value="C" onClick=color_change(this)><span>   C、有合适的机会可以考虑出去发展</span> </td>                                          
                <td><input type="radio" name="answer2" value="D" onClick=color_change(this)><span>   D、目前没有考虑</span></td>
             </tr>
</table>
<script language=javascript>
function color_change(obj){
    obj.parentNode.parentNode.now = obj;
    obj.nextSibling.style.color = "#00f";
    if(obj.parentNode.parentNode.pre) obj.parentNode.parentNode.pre.nextSibling.style.color = "#000";
    obj.parentNode.parentNode.pre = obj;
}
</script>

Answer 5

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
<script>function color_change(obj){
var arr = new Array();
var inputArr = document.getElementsByTagName("input");
for(var i=0; i<inputArr.length;i++){
if(inputArr[i].getAttribute("name") == obj.getAttribute("name")){
arr.push(inputArr[i]);
}
}
for(var i=0; i<arr.length;i++){
arr[i].nextSibling.nextSibling.style.color = "#000";
if(arr[i].getAttribute("value") == obj.getAttribute("value"))
arr[i].nextSibling.nextSibling.style.color = "#00f";
}
}
</script>
 </HEAD> <BODY >
<div>
            <tr id="tr1"><td><input type="radio" name="answer1" value="A" onClick=color_change(this)>  
               <span> A、这就是我喜欢的工作</span></td>                         
                 <td><input type="radio" name="answer1" value="B" onClick=color_change(this)>  
               <span> B、有兴趣，我愿意继续做这份工作</span></td>                      
                 <td><input type="radio" name="answer1" value="C" onClick=color_change(this)>  
               <span> C、说不上兴趣，但是是我的工作</span></td>                                          
                <td><input type="radio" name="answer1" value="D" onClick=color_change(this)>  
              <span> D、不感兴趣，想换一个岗位</span></td>
             </tr>
             </div>
             <div>             
            <tr><td height="24px"></td></tr>
            <tr><td colspan="4" align="left" class="9p"><strong>2、你在公司发展的职业倾向是: </strong></td></tr>
            <tr><td><input type="radio" name="answer2" value="A" onClick=color_change(this)>  
              <span>  A、希望在目前这个方向一直干下去 </span></td>                         
                 <td><input type="radio" name="answer2" value="B" onClick=color_change(this)>  
             <span>   B、希望在公司有其它机会</span></td>                      
                 <td><input type="radio" name="answer2" value="C" onClick=color_change(this)>  
             <span>   C、有合适的机会可以考虑出去发展</span> </td>                                          
                <td><input type="radio" name="answer2" value="D" onClick=color_change(this)>  
             <span>   D、目前没有考虑</span></td>
             </tr>
             </div> </BODY>
</HTML>

Answer 6

<input type="radio" name="a" value="A"><span>A</span>
<input type="radio" name="a" value="B"><span>B</span>
<input type="radio" name="a" value="C"><span>C</span>
<input type="radio" name="a" value="D"><span>D</span>
<script language=javascript>
var b = document.getElementsByName("a");
for (i=0;i<b.length;i++){(function(i){b[i].onclick=function(){bassfun();this.nextSibling.style.color = "#00f"}}(i))}
function bassfun(){for (i=0;i<b.length;i++){b[i].nextSibling.style.color = "#000"}}
</script>应该行为与表现分离！不要把onclick放在页面上

Answer 7

function color_change(obj,name){
var arr=document.getElementsByName(name);
for(var i=0; i<arr.length;i++){
arr[i].nextSibling.nextSibling.style.color="#000";
if(arr[i].value==obj.getAttribute("value"))
arr[i].nextSibling.nextSibling.style.color="#00f";
}
}
我自己写了个通俗易懂的.
可能你们没明白我说的重置,不是当前位置的重置
我是指比如现在有42个题目
到最后想所有都从新答一遍
那么最后
谢谢majianan.
书写的时候用的HTML Dom 其他人用了 XML Dom .但是是我确实对XML dom不了解.只有以后慢慢再去补
<input type="button" onclick="form_reset()" value="重 置">
希望form_reset()能够将所有色彩设置为原来的色彩.那么要是有其中inputArr里面有一个元素没有nexSibling就会报错.这个可以稍微操作一下应该能解决.

Answer 8

用nextSibling的时候要注意IE和FF的解析差别.