單擊文本輸入時清除單選按鈕

Question

我有一組 4 個單選按鈕，后跟一個文本輸入，當用戶單擊文本輸入字段時，我試圖清除所有單選輸入。 到目前為止，這是我的代碼。

 <input type="radio" name="radio"><label for="radio1">1</label>
 <input type="radio" name="radio"><label for="radio2">2</label>
 <input type="radio" name="radio"><label for="radio3">3</label>
 <input type="radio" name="radio"><label for="radio4">4</label>
 <input type="text" id="textInput">

 <script>
      $('#textinput').click(function () {
          radio.checked = false;
      });
 </script>

Answer 1

您可以使用.prop()設置輸入 rabio 按鈕的選中屬性。 此外，您在事件綁定時拼錯了textInput

<script>
      $('#textInput').click(function () {
          $('input[name="radio"]').prop("checked", false);
      });
 </script>

演示

Answer 2

<script>
      $('#textInput').click(function () {
          $('input[type=radio]').removeAttr("checked");

      });
 </script>

Answer 3

或者你可以試試 attr() 方法

 $('#textInput').click(function () {
         $('input[name="radio"]').attr('checked',false);

      });

演示

Answer 4

我認為修改腳本塊（不更改 html）的最佳方法是首先確保代碼在准備好的文檔上運行，並且您可能應該確保事件是焦點，而不是單擊，以防有人使用鍵盤或備用導航：

$(function() {
    $('#textInput').focus(function () {
          $('input[name=radio]').prop("checked", false);
    });
});

盡管您可能更可能只想清除其他選擇，前提是它們實際上在該字段中輸入了一些數據，但您可能希望這樣做：

$(function() {    
    $('#textInput').on('input', function () {
        if($(this).val().length > 0) {
            $('input[name=radio]').prop("checked", false);
        }
    });
});