如何通過填寫文本字段來檢查單選按鈕？

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>