I have a group of 4 radio buttons followed by a text input, when users click on the text input field I am trying to clear all radio inputs. here is my code so far.

 <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>

I have a group of 4 radio buttons followed by a text input, when users click on the text input field I am trying to clear all radio inputs. here is my code so far.

 <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>

• javascript
• html
• jquery
• forms
• radio-button

Share Improve this question Follow edited Jul 2, 2022 at 7:59 Jonas 129k102102 gold badges327327 silver badges405405 bronze badges asked Feb 3, 2014 at 20:36 nicknick 1,25633 gold badges2121 silver badges4141 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 6

You can use .prop() to set checked property of input rabio buttons. Also you have misspelled textInput while event binding

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

DEMO

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

      });
 </script>

Or you can try attr() method

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

      });

DEMO

I think the best way to modify your script block (without changing your html) is first by ensuring that the code runs on document ready, and also you should probably ensure that the event is focus, not click, in case someone is using a keyboard or alternate navigation:

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

Though it's probably more likely that you want to only clear other selections if they actually enter some data in that field, you might want to instead do:

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