單選按鈕顯示文本框（如果選中），如果選擇其他選項則消失

Question

選擇單選按鈕時，我試圖添加一個文本區域。 如果選擇了另一個選項，則我需要該文本區域消失。

我有以下設置

Default.php調用該代碼，因此我可以在以后的任何頁面中包含此代碼

包括'core / chkbox.php'

4. chkbox.php包含以下內容

 <script type="text/javascript"> function dynInput(cbox) { if (cbox.checked) { var input = document.createElement("input"); input.type = "text"; var div = document.createElement("div"); div.id = cbox.name; div.innerHTML = cbox.title; div.appendChild(input); document.getElementById("insertinputs").appendChild(div); } else { document.getElementById(cbox.name).remove(); } } </script> 

4. 然后在我試圖在其中顯示單選按鈕和textarea的頁面中將其稱為

>

<tr>
            <td><label>Does Change Impact on<br> services?:</label></tr></td>
            <td>

            <input type="radio" class="radio" value="1" name="chg_serviceimpact_ckbx" title="Details:"onclick="dynInput(this);" />Yes
            <input type="radio" class="radio" value="1" name="chg_serviceimpact_ckbx" />No

            <p id="insertinputs" <textarea title="Will services be impact during implementation? Please note outage duration and system" name="chg_serviceimpact" Style="height: 40px" Style="width:400px"></textarea>
                  </p>
                    </></td>                </tr>

我的問題是，如果選擇“是”，則會出現txt框，但我無法設置此框的大小；如果選擇“否”，則文本框中的內容不會被刪除；如果選擇“是”，則兩次文本區域也會出現兩次。

解密和理解這一點的任何幫助將不勝感激。

Answer 1

您的HTML應始終包含文本框。 只需使用CSS顯示/隱藏它即可。

當前，每次選擇相應選項時，您都將添加一個文本框。

Answer 2

您的代碼中有很多問題：

1）單選按鈕具有相同的值和名稱-發布數據后（如果要發布），您將無法分辨設置了哪個選項。

2）Onclick僅設置為“是”元素，而從不處理“否”元素。

3）當元素已經出現時，您不處理點擊。

如果要繼續使用“插入或刪除”方法，請使用以下方法修復HTML：

<input type="radio" class="radio" value="1" name="chg_serviceimpact_ckbx" title="Details:" onclick="dynInput(this);" />Yes
<input type="radio" class="radio" value="0" name="chg_serviceimpact_ckbx" onclick="dynInput(this)" />No

通過編寫以下腳本：

function dynInput(cbox) {   
  var elem = document.getElementById(cbox.name);

  if (cbox.value == 1) {
    // you press 'Yes'
    if (!elem) {
      // check if you already have your input
      var input = document.createElement("input");
      input.type = "text";
      var div = document.createElement("div");
      div.id = cbox.name;
      div.innerHTML = cbox.title;
      div.appendChild(input);
      document.getElementById("insertinputs").appendChild(div);
    }
  }
  else {
    // you press 'No'
    if (elem) elem.parentElement.removeChild(elem);
  }

} 

Answer 3

您也許可以使用純CSS實現此目的：

HTML：

<div>
    <input id="radio1" name="group" type="radio" />
    <input class="theinput" name="input1" type="text"/>
</div>
<div>
    <input id="radio2" name="group" type="radio" />
    <input class="theinput" name="input2" type="text"/>
</div>
<div>
    <input id="check1" name="group" type="checkbox" />
    <textarea class="theinput" name="textarea"></textarea>
</div>

CSS：

.theinput {
  display: none;  
}

input[type="checkbox"]:checked + .theinput, input[type="radio"]:checked + .theinput {
    display: inline-block;
}

JSFiddle