一个关于 选中/不选 checkbox 而改变文本框中值的问题

例如有如下代码<input name="text1" type="text" id="Text1" /> <input type="checkbox" name="checkbox1" id="checkbox1" />这只是循环中的一个，打个比方好比有 10 行 text(1-10) 和 checkbox(1-10) ，选中 checkbox(n) 的时候使 text(n) 这个文本框的值等于某个值(这个值不是固定的，每行不同) 同时使得 text(n) 不可编辑，取消选中 checkbox(n) 使得 text(n) 为空值，且可以输入。请问各位高手如何实现？

解决方案 »

  1.   

    <html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>test</title>
    <script>
    var isAll = true;//true:全选;false:取消
    function check(){
    var chks = document.getElementsByName("checkbox1");
    for(var i=0;i<chks.length;i++){
    chks[i].checked = isAll;
    }
    var txts = document.getElementsByName("text1");
    for(var i=0;i<txts.length;i++){
    txts[i].value=isAll?i:"";
    }
    isAll = !isAll;
    }
    </script>
    </head><body>
    <input type=button value="全选" onclick="check()">
    <input name="text1" type="text" id="Text1" /> <input type="checkbox" name="checkbox1" id="checkbox1" /><br>
    <input name="text1" type="text" id="Text1" /> <input type="checkbox" name="checkbox1" id="checkbox1" /><br>
    <input name="text1" type="text" id="Text1" /> <input type="checkbox" name="checkbox1" id="checkbox1" /><br>
    <input name="text1" type="text" id="Text1" /> <input type="checkbox" name="checkbox1" id="checkbox1" /><br>
    <input name="text1" type="text" id="Text1" /> <input type="checkbox" name="checkbox1" id="checkbox1" /><br>
    <input name="text1" type="text" id="Text1" /> <input type="checkbox" name="checkbox1" id="checkbox1" /><br>
    <input name="text1" type="text" id="Text1" /> <input type="checkbox" name="checkbox1" id="checkbox1" /><br>
    <input name="text1" type="text" id="Text1" /> <input type="checkbox" name="checkbox1" id="checkbox1" /><br>
    <input name="text1" type="text" id="Text1" /> <input type="checkbox" name="checkbox1" id="checkbox1" />
    </body></html>
      

  2.   

    不好意思，我理解错了
    <html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>test</title>
    <script>
    function check(obj){
    var num = obj.id.substring(8);
    var txt = document.getElementById("Text"+num);
    if(obj.checked){
    txt.value = num;
    txt.readOnly = true;
    }else{
    txt.value = "";
    txt.readOnly = false;
    }
    }
    </script>
    </head><body>
    <input name="text1" type="text" id="Text1" /> <input type="checkbox" name="checkbox1" id="checkbox1" onclick="check(this)"/><br>
    <input name="text2" type="text" id="Text2" /> <input type="checkbox" name="checkbox2" id="checkbox2" onclick="check(this)"/><br>
    <input name="text3" type="text" id="Text3" /> <input type="checkbox" name="checkbox3" id="checkbox3" onclick="check(this)"/><br>
    <input name="text4" type="text" id="Text4" /> <input type="checkbox" name="checkbox4" id="checkbox4" onclick="check(this)"/><br>
    <input name="text5" type="text" id="Text5" /> <input type="checkbox" name="checkbox5" id="checkbox5" onclick="check(this)"/><br>
    <input name="text6" type="text" id="Text6" /> <input type="checkbox" name="checkbox6" id="checkbox6" onclick="check(this)"/><br>
    <input name="text7" type="text" id="Text7" /> <input type="checkbox" name="checkbox7" id="checkbox7" onclick="check(this)"/><br>
    <input name="text8" type="text" id="Text8" /> <input type="checkbox" name="checkbox8" id="checkbox8" onclick="check(this)"/><br>
    <input name="text9" type="text" id="Text9" /> <input type="checkbox" name="checkbox9" id="checkbox9" onclick="check(this)"/>
    </body></html>
      

  3.   

    <html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>test</title>
    <script>
    function check(obj,textvalue){
        var num = obj.id.substring(8);
        var txt = document.getElementById("Text"+num);
        if(obj.checked){
            txt.value = textvalue;
            txt.readOnly = true;
        }else{
            txt.value = "";
            txt.readOnly = false;
        }
    }
    </script>
    </head><body>
    <input name="text1" type="text" id="Text1" /> <input type="checkbox" name="checkbox1" id="checkbox1" onclick="check(this,100)"/><br>
    <input name="text2" type="text" id="Text2" /> <input type="checkbox" name="checkbox2" id="checkbox2" onclick="check(this,200)"/><br>
    <input name="text3" type="text" id="Text3" /> <input type="checkbox" name="checkbox3" id="checkbox3" onclick="check(this,300)"/><br>
    <input name="text4" type="text" id="Text4" /> <input type="checkbox" name="checkbox4" id="checkbox4" onclick="check(this,400)"/><br>
    <input name="text5" type="text" id="Text5" /> <input type="checkbox" name="checkbox5" id="checkbox5" onclick="check(this,500)"/><br>
    <input name="text6" type="text" id="Text6" /> <input type="checkbox" name="checkbox6" id="checkbox6" onclick="check(this,600)"/><br>
    <input name="text7" type="text" id="Text7" /> <input type="checkbox" name="checkbox7" id="checkbox7" onclick="check(this,700)"/><br>
    <input name="text8" type="text" id="Text8" /> <input type="checkbox" name="checkbox8" id="checkbox8" onclick="check(this,800)"/><br>
    <input name="text9" type="text" id="Text9" /> <input type="checkbox" name="checkbox9" id="checkbox9" onclick="check(this,900)"/>
    </body>
    谢谢 lihui_shine 大大，我修改了一下，满足了要求，js一点不懂，乱改的，居然成了。嘿。