基于 HTML/JavaScript 中的用户选择动态删除表单元素

Question

我试图在选择否单选按钮时删除上传文件的选项，但是当我单击否时它并没有消失。当涉及到 JavaScript 时，我不知道自己在做什么。我如何让它消失（或回来）。

<form method="post" enctype="multipart/form-data" onsubmit="return validateForm()">
        <input type="submit" value="Submit" /><br>
        <label for="fname">First Name:</label>
        <input type="text" required /><br>
        <label for="lname">Last Name:</label>
        <input class="lname" type="text" required/><br>
        <label for="email">Email:</label>
        <input class="email" type="text" required/><br>
        <input type="radio" name="file" value="yes" id="yes" />
        <label for="Yes">Yes</label>
        <input type="radio" name="file" value="no" id="no" />
        <label for="No" "removeElement();">No</label><br>
        <p><input type="file" size="30" required></p>
        </form>

        <script>
            function validateForm() {
                window.open("https://www.stackoverflow.com");
            }

            function removeElement(){
                var parent = document.getId(file);
                parent.removeChild(file);
            }
        </script>

任何帮助将不胜感激！

Answer 1

您不能只将removeElement(); 放在html 标记的中间。

我假设你想隐藏文件标签？您首先要删除 required。

你需要在你的号码上添加一个事件监听器。

在 jQuery 中是这样的

$('#no').change(
    function() {
       if ($(this).is(':checked') && $(this).val() == 'no') {
            $(this).hide(); //Change this for the id of the element you want
        }
        else {
            $(this).show(); //Change this for the id of the element you want
        }
    });

部分灵感来自this source

如果您正在寻找纯 JavaScript，我的解决方案如下所示：

<form method="post" enctype="multipart/form-data" onsubmit="return validateForm()">
<input type="submit" value="Submit" /><br>
<label for="fname">First Name:</label>
<input type="text" required /><br>
<label for="lname">Last Name:</label>
<input class="lname" type="text" required/><br>
<label for="email">Email:</label>
<input class="email" type="text" required/><br>
<input type="radio" name="file" value="yes" id="yes" onclick="handleChange(false);" />
<label for="Yes">Yes</label>
<input type="radio" name="file" value="no" id="no" onclick="handleChange(true);" />
<label for="No">No</label><br>
<p><input type="file" size="30" id="fileUpload"></p>
</form>

<script>
    function validateForm() {
        window.open("https://www.stackoverflow.com");
    }

    function handleChange(remove) {
        var element = document.getElementById('fileUpload');
        if (remove)
            element.style.display = 'none';
        else 
            element.style.display = 'block';
    }

</script>

（未测试）

Answer 2

隐藏：

document.querySelectorAll('input[type=file]').style.display = 'none';

表演：

document.querySelectorAll('input[type=file]').style.display = 'block'; //or ''