Question

我正在尝试在选择单选按钮时添加textarea。如果选择了另一个选项，我需要这个textarea消失。

我有以下设置

Default.php调用代码，以便我可以在以后的任何页面中包含它

包括＆＃39; core / chkbox.php＆＃39;

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>

然后在我试图显示单选按钮和textarea

＆GT;

<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设置为＆＃34;是＆＃34;只有元素，你永远不会处理＆＃34;否＆＃34;元件。

3）当你的元素已经出现时，你不会处理点击。

如果您想继续＆＃34;插入或删除＆＃34;方法，用以下方法修复您的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

单选按钮显示选中的文本框，如果选择其他选项则消失

3 个答案:

HTML：

CSS：