radio，彈出相應文本框

 

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>