进来看看吧。

<body bgcolor="#323456" onload=chushi()>
<font color="yellow" size="4"><b>
<p>请选择查询条件：</p>
<p>（支持模糊查询）</p>
<form  method="post" action="">
<p>
</form>
</b></font>
<input type="checkbox" name="checkbox" value="checkbox" onclick="(this.checked)?(textfield.readOnly=false):(textfield.readOnly=true)">书名
<p>
<input type="text" id="textfield" value="输入书名" style="color:red"></p>
<p>
<input type="checkbox" name="checkbox2" value="checkbox" onclick="(this.checked)?(textfield2.readOnly=false):(textfield2.readOnly=true)">作者</p>
<p>
<input type="text" id="textfield2" value="输入作者"></p>
<p>
<input type="checkbox" name="checkbox3" value="checkbox" onclick="(this.checked)?(textfield3.readOnly=false):(textfield3.readOnly=true)">出版社</p>
<p>
<input type="text" id="textfield3" value="输入出版社"></p>
<p>
<input type="checkbox" name="checkbox4" value="checkbox" onclick="(this.checked)?(textfield4.readOnly=false):(textfield4.readOnly=true)">ISBN</p>
<p>
<input type="text" id="textfield4" value="输入ISBN"></p>
<p>
<input type="submit" name="caxun" value="查询">
<input type="reset" name="congxie" value="重写"> 
</form>
</b>
</form>
<p>&nbsp; </p>
</body></html>
<script>
 function chushi()
 {
   aa= document.getElementsByTagName("input");
   for (i=0;i<aa.length;i++)
   {
     if (aa[i].type =="text")
     aa[i].readOnly=true;   
   }
 }
</script>

解决方案 »

  1.   

    <style>
    .bb
    {
      font-size:20px;
      color:blue;
    }
    </style></head><body bgcolor="#323456" onload=chushi()>
    <font color="yellow" size="4"><b>
    <p>请选择查询条件：</p>
    <p>（支持模糊查询）</p>
    <form  method="post" action="">
    <p>
    </form>
    </b></font>
    <input type="checkbox" name="checkbox" value="checkbox" onclick="bianse(this,textfield);(this.checked)?(textfield.readOnly=false):(textfield.readOnly=true)">书名
    <p>
    <input type="text" id="textfield" value="输入书名" ></p>
    <p>
    <input type="checkbox" name="checkbox2" value="checkbox" onclick="bianse(this,textfield2);(this.checked)?(textfield2.readOnly=false):(textfield2.readOnly=true)">作者</p>
    <p>
    <input type="text" id="textfield2" value="输入作者"></p>
    <p>
    <input type="checkbox" name="checkbox3" value="checkbox" onclick="bianse(this,textfield3);(this.checked)?(textfield3.readOnly=false):(textfield3.readOnly=true)">出版社</p>
    <p>
    <input type="text" id="textfield3" value="输入出版社"></p>
    <p>
    <input type="checkbox" name="checkbox4" value="checkbox" onclick="bianse(this,textfield4);(this.checked)?(textfield4.readOnly=false):(textfield4.readOnly=true)">ISBN</p>
    <p>
    <input type="text" id="textfield4" value="输入ISBN"></p>
    <p>
    <input type="submit" name="caxun" value="查询">
    <input type="reset" name="congxie" value="重写"> 
    </form>
    </b>
    </form>
    <p>&nbsp; </p>
    </body><script>
     function chushi()
     {
       aa= document.getElementsByTagName("input");
       for (i=0;i<aa.length;i++)
       {
         if (aa[i].type =="text")
         aa[i].readOnly=true;   
       }
     }
     function bianse(id,t1)
     {
       if (id.checked)
        t1.className="bb";
       else
        t1.className="";
     
     }
    </script>
      

  2.   

    把上边的对应部分换成如下，背景就可以变了
    <style>
    .bb
    {
      font-size:20px;
      color:blue;
      background:yellow;
    }
    </style>