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

时间:2013-05-15 10:47:12

标签: java javascript html jsp

我在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="",但它没有用。

1 个答案:

答案 0 :(得分:1)

正如评论中所讨论的,这个答案假设你已经在每组单选按钮和文本框周围包裹了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]);
}

Demo