单选按钮和文本框事件处理

Radio buttons and text box event handling

本文关键字：事件处理 文本 单选按钮      更新时间：2023-09-26

我正在JSP中制作页面，无法确定如何执行以下操作。

我在for循环中动态生成了一堆单选按钮

<%
for (Something something : somethings) {
    for (Random random : something.getRandoms ()) { %>
        <input type ="radio" name="<%= something%>" value="<%= random.toString()%>"><%= random%> <br>
<% }%>
    Some text here : <input type = "text" name="<%= something%>Text" placeholder="Some more text here"/>
<% }%>

我想做的是:

当选中其中一个单选按钮时，文本框应为空，当文本框中输入某些文本时，应清除单选按钮。

我尝试在javascript中说<name of text box>.value=""，但它不起作用。

正如在评论中讨论的那样，这个答案假设您已经在每组单选按钮和文本框周围包装了一个fieldset:

var sets = document.getElementsByTagName('fieldset'),
    setsCount = sets.length,
    clearBox = function (box) {
        box.value = '';
    },
    clearFields = function (fieldset) {
        var buttons = fieldset.querySelectorAll('input[type="radio"]'),
            buttonCount = buttons.length,
            textBox = fieldset.querySelector('input[type="text"]'),
            j;
        for (j = 0; j < buttonCount; j += 1) {
            buttons[j].onclick = function () {
                clearBox(textBox);
            };
        }
        textBox.onkeypress = function () {
            for (j = 0; j < buttonCount; j += 1) {
                buttons[j].checked = false;
            }
        };
    },
    i;
for (i = 0; i < setsCount; i += 1) {
    clearFields(sets[i]);
}
演示

相关文章：