如何通过填写文本字段来检查单选按钮？

Question

我有一个HTML表单，其中有一些单选按钮和一个文本字段。 填写文本字段时，我希望选中相应的单选按钮。

我想Java语言是可能的。 谁能帮我吗？

谢谢！

Answer 1

这是没有jQuery的方法。 如果输入为空，这还将取消选中单选按钮。

 var inputs = document.querySelectorAll('input[type="text"]'); for (var i = 0; i < inputs.length; i++) { var input = inputs[i]; input.addEventListener('input', function() { if (this.value == "") { this.nextElementSibling.checked = false; } else { this.nextElementSibling.checked = true; } }); } 

 <input type="text"> <input type="radio"> <input type="text"> <input type="radio"> 

如果文本字段之前有单选按钮，则只需将nextElementSibling更改为previousElementSibling 。

说明

document.querySelectorAll('input[type="text"]')将返回代表每个输入文本字段的DOM元素数组。

然后，使用for循环遍历每个文本字段。

对于每个文本字段，将添加一个事件侦听器，该事件侦听器将在用户更改文本字段中的input时调用定义的函数。 在此不要使用change ，因为这只会在焦点离开文本字段时（换句话说，当用户在文本字段之外单击时）触发事件。

在事件侦听器中，我们可以使用this引用当前文本字段。

我们可以使用this.nextElementSibling对当前文本字段旁边的单选按钮的引用。 尝试使用this.nextSibling将不起作用，因为它将在输入字段中找到包含实际文本的节点。

if语句检查当前文本字段是否为空白。 如果是空白的，将所设置的checked相应的单选按钮的属性为false ，但如果它不为空，它将设置checked来true 。

Answer 2

不知道页面上是否有jquery，但是使用jQuery可以使用

$('#idOfTextbox').on('input propertychange paste', function() {
    $('#idOfCheckbox').attr('checked', true);
});

Answer 3

您可以使用.on('input' ...

请查看代码段。

 $('.container').on('input' , 'input[type=text]',function(e){ var that = $(this); that.prev().prop({'checked':that.val().length>0}); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class=container> <div><input type=radio /><input type=text></div> <div><input type=radio /><input type=text></div> <div><input type=radio /><input type=text></div> <div><input type=radio /><input type=text></div> <div><input type=radio /><input type=text></div> </div>