一个用radio控制的输入框

最新推荐文章于 2023-04-29 08:29:48 发布

原创最新推荐文章于 2023-04-29 08:29:48 发布 · 2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#input #javascript #function #table #html

javaScript 专栏收录该内容

5 篇文章

订阅专栏

博客介绍了两种使用JavaScript实现输入框显示切换的方法。第一种通过单选框的焦点事件，根据选中状态控制文本输入框的显示与隐藏；第二种同样利用单选框焦点事件，控制表格中不同区域的显示与隐藏，均借助JavaScript函数操作元素的样式属性。

第一种方法：

<html>
<script language="javascript">
  function changeType()
  {
    if(document.all.radio[0].checked){
     document.all.text2.style.display='none';
     document.all.text1.style.display='';
    }
    if(document.all.radio[1].checked){
     document.all.text1.style.display="none";
     document.all.text2.style.display='';
    }
  }
</script>
<body>
<input type="radio" name="radio" onFocus="changeType()" checked>
<input type="radio" name="radio" onFocus="changeType()"><br>
<input type="text" name="text1" value="text1">
<input type="text" name="text2" value="text2" style="display:none">
</body>
</html>

第二种方法

function show2()
      {
        document.all.Display1.style.display='none';
        document.all.Display2.style.display='';
        //return;
      }
</script>
   <tr>
     <td height="20"></td>
<td colspan="2" align="right"><input type="radio" id="RegistType1" name="UserType" value="" onFocus="show1();" checked>XXX</td>
<td align="left"><input type="radio" id="RegistType2" name="UserType" value="" onFocus="show2();">XXX</td>
<td></td>
   </tr>
   <tr>
     <td height="20"></td>
     <td colspan="3">
     <span id="Display1" name="Display1" style="display:''">
   <table width="100%">
        <tr>
          <td height="15"></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td height="11"></td>
          <td></td>
          <td></td>
        </tr>
       <tr>
         <td></td>
         <td align="right">XXX：<input type="text" name="" width="150"></td>
         <td></td>
       </tr>
   </table>
      </span>
      <span id="Display2" name="Display2" style="display:none">
   <table width="100%">
        <tr>
          <td></td>
          <td align="right">XXX：<input type="text" name="" width="150"></td>
          <td></td>
        </tr>
        <tr>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td></td>
          <td align="right">XXX： <input type="text" name="" width="150"></td>
          <td></td>
        </tr>
   </table>
      </span>