选中复选框的时候改变后面文本框的背景颜色

求救  
需要个js选中复选框的时候改变后面文本框的背景颜色nextSibling的就不要用了
类似这样选中的时候把背景颜色改为白色

解决方案 »

  1.   

    LZ是这样的吗？<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>无标题文档</title>
    </head>
    <script language="javascript" type="text/javascript">
    function chkFlag(chkBoxID,inputBoxID){
    var oSel=document.getElementById(chkBoxID);
    var oInBox=document.getElementById(inputBoxID);
    if(oSel.checked)
    oInBox.style.backgroundColor="#dd9900";
    else
    oInBox.style.backgroundColor="#ffffff";
    }</script>
    <body>
    <table width="100%"  border="0" bordercolor="1">
      <tr>
        <td width="12%" align="right">
    <input name="chk01" type="checkbox" id="chk01" value="checkbox" onClick="javascript:chkFlag('chk01','input01');">
    </td>
        <td width="20%"><input name="input01" type="text" id="input01"></td>
        <td width="68%">&nbsp;</td>
      </tr>
    </table></body>
    </html>
      

  2.   

    颜色弄反了修改JS如下
    function chkFlag(chkBoxID,inputBoxID){
    var oSel=document.getElementById(chkBoxID);
    var oInBox=document.getElementById(inputBoxID);
    if(oSel.checked)
        oInBox.style.backgroundColor="#ffffff"; //选种的背景颜色
    else
        oInBox.style.backgroundColor="#dddddd"; //非选中的背景颜色
    }年后第一次发帖，  :)
      

  3.   

    function chkFlag(chkBoxID,inputBoxID){
    var oSel=document.getElementById(chkBoxID);
    var oInBox=document.getElementById(inputBoxID);
    if(oSel.checked)
      oInBox.disabled="false"; 
    else
      oInBox.disabled="true";
    }
    是这个意思不？
      

  4.   

    下面方法可同时实现任意组合的更多样式设置：
    使用方式：
    <input type="checkbox" exec="backgroundColor='#ffffff';color='black';border='1px solid black'|backgroundColor='red';color='blue';border='0px'" onClick="javascript:setStyleWithChk(this,'input01');"完整代码：<meta name="Author" content="theforever,the4ever,ZL,赵亮,碧海情天,断水寒刀" />
    <meta name="Keyword" content="theforever,the4ever,ZL,赵亮,碧海情天,断水寒刀" />
    <meta name="Email" content="theforever·163。com" />
    <meta name="Blog" content="http://blog.csdn.net/theforever" />
    <script language="javascript" type="text/javascript">
    function setStyleWithChk(srcObj,targetID){
    var sets=srcObj.exec.split("|");
    var targetObj=document.getElementById(targetID);
    var n=srcObj.checked?1:0;
    if(sets[n]!=''){
    var todo=sets[n].split(";");
    for(var i=0;i<todo.length;i++){
    eval("document.getElementById('" + targetID + "').style." + todo[i] +";");
    }
    }
    }
    </script>
    <table width="100%"  border="0" bordercolor="1">
      <tr>
        <td width="12%" align="right">
        <input type="checkbox" exec="backgroundColor='#ffffff';color='black';border='1px solid black'|backgroundColor='red';color='blue';border='0px'" onClick="javascript:setStyleWithChk(this,'input01');">切换样式
        </td>
        <td width="20%"><input name="input01" id="input01" value="看看效果"></td>
        <td width="68%">&nbsp;</td>
      </tr>
    </table>
      

  5.   

    原理是给复选框设置自定义属性，里面通过|分隔选中和未选中两种状态对应的样式设置，每种可用分号列举多项。点击事件中只需更改目标对象（不只限于输入框）的ID即可。在JS函数中根据复选框的状态将对应的设置序列逐一进行设置。这样，JS就更通用些，无论进行其它何种样式（如字体粗细等）更改，JS函数都不必改动，只需设置exec里面的内容即可，多个复选框可以通过调用同一个函数，分别实现不同的样式设置。
      

  6.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <script>
    function changeBackground(Xelement)
    {
        var text=document.getElementById("text1");
        if(Xelement.checked)
            text.style.background="#fff";
        else
            text.style.background="#ccc";
    }
    </script>
    </head>
    <body>
    <input type="checkbox" id="check1" name="check1" onclick="changeBackground
    (this)" />Add：
    <input type="text" id="text1" value="1" 
    style="width:50px;background:#ccc"/>
    </body>
    </html>