根据 radioButton 的值创建一个文本框答案

【问题标题】：create a textbox based on the value of a radioButton根据 radioButton 的值创建一个文本框
【发布时间】：2018-11-28 17:16:34
【问题描述】：

大家好，我想确保在我的项目中，一旦我更改了它旁边的单选按钮的值，就会创建/或使文本框可见.. 如果单选按钮是“（SI）”，则显示文本框如果单选按钮是“（否”），则文本框变暗

我附上了我尝试生成 textBox .. 但我不知道如何管理 radioButton 的值 ..

PS 别无情，我是 JavaScript 初学者--

<html>
<head>

<script language="JavaScript" type="text/javascript">
<!--
var num=1;
function accoda(){
    if(document.createElement && document.getElementById && document.getElementsByTagName) {
        // crea elementi
        var oTr=document.createElement("TR");
        var oTd1=document.createElement("TD");
        var oTd2=document.createElement("TD");
        var oField=document.createElement("INPUT");
        var oButt=document.createElement("INPUT");

        // setta attributi
        oField.setAttribute("type","text");
        oField.setAttribute("name","testo"+num);
        oButt.setAttribute("type","button");
        oButt.setAttribute("value","rimuovi");

        // setta gestore evento
        if(oButt.attachEvent) oButt.attachEvent('onclick',function(e){rimuovi(e);})
        else if(oButt.addEventListener) oButt.addEventListener('click',function(e){rimuovi(e);},false)

        // appendi al relativo padre
        oTd1.appendChild(oField);
        oTd2.appendChild(oButt);
        oTr.appendChild(oTd1);
        oTr.appendChild(oTd2);
        document.getElementById('tabella').getElementsByTagName('TBODY')[0].appendChild(oTr);

        // incrementa variabile globale
        num++
    }
}


function rimuovi(e){
    if(document.removeChild && document.getElementById && document.getElementsByTagName) {
        if(!e) e=window.event;
        var srg=(e.target)?e.target:e.srcElement;

        // risali al tr del td che contiene l' elemento che ha scatenato l' evento
        while(srg.tagName!="TR"){srg=(srg.parentNode)?srg.parentNode:srg.parentElement}

        // riferimento al tbody
        var tb=document.getElementById('tabella').getElementsByTagName('TBODY')[0];
        
        // rimuovi
        tb.removeChild(srg);
    }
}
//-->
</script>
</head>
<body>
<form name="modulo">
<input type="button" value="accoda" onclick="accoda()" />
<table border="1" id="tabella">
<tbody>
<tr>
<td><input type="text" name="testo0" /></td><td><input type="button" disabled="disabled" value="rimuovi" /></td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
<html>
<body>
<script language="javascript">
  function controlla(){
    x=document.prova;
    if (x.scelta.value=="si"){
      window.location.href = '../affidatario.php?idCantiere=<?php echo $idCantiere?>'
      return false;
    }
    if (x.scelta.value=="no"){
      alert("Hai risposto no");
       window.location.href = '../inserimentoCantiere.php'
      return false;
    }
  }
</script>
<fieldset>
<strong>Vuoi inserire un affidatario?</strong>
<form action="?" method="POST" name="prova" onsubmit="return controlla();">
  SI<input type="radio" name="scelta" value="si" /><br />
  NO<input type="radio" name="scelta" value="no" /><br />
  <button type="submit">INVIA</button>
</form>
</fieldset>
</body>
</html>

【问题讨论】：

除非您有特定原因，否则为什么不隐藏并显示现有的Input？
嗨瑞恩，谢谢你的回答..但是，选项是生成或隐藏和显示......但我不知道如何检查radioButton接收的值. @RyanSearle
@AlexLogic 出于好奇，除了html中的display: block;，和我的回答有什么区别？

标签： javascript html css textbox radio-button

【解决方案1】：

试试这个

function controlla() {
        console.log("oie");
        x = document.prova;
        if (x.scelta.value == "si") {
            window.location.href = '../affidatario.php?idCantiere=608675750'
            return false;
        }
        if (x.scelta.value == "no") {
            alert("Hai risposto no");
            window.location.href = '../inserimentoCantiere.php'
            return false;
        }
    }
    document.querySelectorAll('input[name="scelta"').forEach(function(a) {
        a.addEventListener("change", function() {
            let textBox = document.getElementById("myInput");
            if (textBox) textBox.style.display = this.value === "si" ? "block" : "none";
        })
    });

<html>
<body>
<fieldset>
<strong>Vuoi inserire un affidatario?</strong> 
<form action="?" method="POST" name="prova" onsubmit="return controlla();"> 
SI<input type="radio" name="scelta" value="si">
<input type="text" id="myInput" style="display: block;"><br>
NO<input type="radio" name="scelta" value="no"><br> 
<button type="submit">INVIA</button>
</form>
</fieldset> 
</body>
</html>

【讨论】：

这个答案看起来很熟悉。你只是复制粘贴然后只更改display: block;？

【解决方案2】：

将文本框的显示更改为'none'
你可以有一个if 块。类似
if(document.querySelector('_radiobutton_').checked) { //selecting the radio button with "SI" document.querySelector('theTextBox').style.display = '' //selecting the textbox }

【讨论】：

【解决方案3】：

这是一个简单的例子：

let chbxElement = document.getElementById('chckbx');
let textBoxElement = document.getElementById('txtbx');

chbxElement.addEventListener('change', (e) => {
    textBoxElement.style.display = e.target.checked ? 'block' : 'none';
});

<input type="checkbox" id="chckbx"/>

<input type="text" id="txtbx" hidden/>

【讨论】：

【解决方案4】：

除了放置文本框外，您还可以添加一个文本框，例如 id "myInput" 和默认 display:none;

然后在更改事件中添加一个事件监听器。然后根据单选按钮的值显示或隐藏文本框。

例如：

document.querySelectorAll('input[name="scelta"]').forEach(function(a) {
    a.addEventListener("change", function() {
        let textBox = document.getElementById("myInput");
        if (textBox) textBox.style.display = this.value === "si" ? "block" : "none";
    })
});

<html>

<head>

    <script language="JavaScript" type="text/javascript">
        <!--
        var num = 1;

        function accoda() {
            if (document.createElement && document.getElementById && document.getElementsByTagName) {
                // crea elementi
                var oTr = document.createElement("TR");
                var oTd1 = document.createElement("TD");
                var oTd2 = document.createElement("TD");
                var oField = document.createElement("INPUT");
                var oButt = document.createElement("INPUT");

                // setta attributi
                oField.setAttribute("type", "text");
                oField.setAttribute("name", "testo" + num);
                oButt.setAttribute("type", "button");
                oButt.setAttribute("value", "rimuovi");

                // setta gestore evento
                if (oButt.attachEvent) oButt.attachEvent('onclick', function(e) {
                    rimuovi(e);
                })
                else if (oButt.addEventListener) oButt.addEventListener('click', function(e) {
                    rimuovi(e);
                }, false)

                // appendi al relativo padre
                oTd1.appendChild(oField);
                oTd2.appendChild(oButt);
                oTr.appendChild(oTd1);
                oTr.appendChild(oTd2);
                document.getElementById('tabella').getElementsByTagName('TBODY')[0].appendChild(oTr);

                // incrementa variabile globale
                num++
            }
        }


        function rimuovi(e) {
            if (document.removeChild && document.getElementById && document.getElementsByTagName) {
                if (!e) e = window.event;
                var srg = (e.target) ? e.target : e.srcElement;

                // risali al tr del td che contiene l' elemento che ha scatenato l' evento
                while (srg.tagName != "TR") {
                    srg = (srg.parentNode) ? srg.parentNode : srg.parentElement
                }

                // riferimento al tbody
                var tb = document.getElementById('tabella').getElementsByTagName('TBODY')[0];

                // rimuovi
                tb.removeChild(srg);
            }
        }
        //-->
    </script>
</head>

<body>
<form name="modulo">
    <input type="button" value="accoda" onclick="accoda()" />
    <table border="1" id="tabella">
        <tbody>
        <tr>
            <td><input type="text" name="testo0" /></td>
            <td><input type="button" disabled="disabled" value="rimuovi" /></td>
        </tr>
        </tbody>
    </table>
</form>
</body>

</html>
<html>

<body>

<fieldset>
    <strong>Vuoi inserire un affidatario?</strong>
    <form action="?" method="POST" name="prova" onsubmit="return controlla();">
        SI<input type="radio" name="scelta" value="si" /><br /> NO
        <input type="radio" name="scelta" value="no" /><br />
        <input type="text" id="myInput" style="display: none;">
        <button type="submit">INVIA</button>
    </form>
</fieldset>
<script language="javascript">
    function controlla() {            
        x = document.prova;
        if (x.scelta.value == "si") {
            window.location.href = '../affidatario.php?idCantiere=<?php echo $idCantiere?>'
            return false;
        }
        if (x.scelta.value == "no") {
            alert("Hai risposto no");
            window.location.href = '../inserimentoCantiere.php'
            return false;
        }
    }
    document.querySelectorAll('input[name="scelta"]').forEach(function(a) {
        a.addEventListener("change", function() {
            let textBox = document.getElementById("myInput");
            if (textBox) textBox.style.display = this.value === "si" ? "block" : "none";
        })
    });
</script>
</body>

</html>

【讨论】：