Question

大家好，我想确保在我更改项目旁边的单选按钮的值后，在我的项目中创建该文本，或者使textBox可见。如果单选按钮为“（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>

Answer 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>

Answer 2

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

Answer 3

除了放置文本框之外，您还可以添加一个文本框，例如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>

Answer 4

这是一个简单的例子：

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 个答案: