radio，弹出相应文本框

最新推荐文章于 2025-06-02 15:25:48 发布

原创最新推荐文章于 2025-06-02 15:25:48 发布 · 1.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#js #radio

小插件专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种使用HTML和JavaScript实现的功能，该功能可根据用户选择是否拥有专利来动态显示或隐藏专利名称和专利号的输入框。通过简单的前端代码实现了良好的用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

radio，弹出相应文本框

说明：初始的状态是，隐藏专利名和专利号两个文本输入框，当点击有专利，显示两个文本输入框，点击无专利，隐藏文本输入框。项目的技术成果发布表单中的就有该功能的应用。

html:

<!-- 单选项，通过点击某个选项来显示或是隐藏某个元素 -->
<tr>
   <td><strong>是否有专利：</strong></td>
   <td>
      <input type="radio" name="patent" value="1" onchange="chy(this)">有专利
      <input type="radio" name="patent" value="0" onchange="chn(this)">无专利
   </td>
</tr>
<tr id="patent1" style="display:none">
   <td><strong>专利名称</strong></td>
   <td><input type="text" class="form-control" placeholder="专利名称,无则不填" name="patent_name"></td>
</tr>
<tr id="patent2" style="display:none">
    <td><strong>专利号</strong></td>
    <td><input type="text" class="form-control" placeholder="专利号,无则不填" name="patent_id"></td>
</tr>

js:

<script language="javascript">
    function chy(obj){
        var rr = $("input[type='radio']:checked").val();
        if(rr =="1"){
            document.getElementById("patent1").style.display="";
            document.getElementById("patent2").style.display="";
        }
    }
    function chn(obj){
        var rr = $("input[type='radio']:checked").val();
        if(rr =="0"){
            document.getElementById("patent1").style.display="none";
            document.getElementById("patent2").style.display="none";
        }
    }
</script>