I have a group of radio buttons and a single text input field. When I click on the text input the radio buttons bee unchecked using JavaScript, but when I type something into the form field and then reselect a radio button I can not get the text to be deleted. Here is my code so far, If someone could help me get the text box to clear all input when I select a radio I know im close.

<input type="radio" id="radio1" name="radios"   checked>
<label for="radio1">$10</label>
<input type="radio" id="radio2" name="radios" >
<label for="radio2">$25</label>
<input type="radio" id="radio3" name="radios"  >
<label for="radio3">$50</label>
<input type="radio" id="radio4" name="radios" >
<label for="radio4">$100</label>
<input type="text" id="textInput">
<script>
<!-- to remove radio on text input click-->
$('#textInput').click(function () {
    $.each($('input[type=radio]'), function () {
         $(this).removeAttr("checked");
});
});
<!-- to remove text on text radio button click-->
$('input[type=radio]').click(function () {
    $.each($('#textInput'), function () {
        $(this).removeAttr("input");
});
});
</script>

I have a group of radio buttons and a single text input field. When I click on the text input the radio buttons bee unchecked using JavaScript, but when I type something into the form field and then reselect a radio button I can not get the text to be deleted. Here is my code so far, If someone could help me get the text box to clear all input when I select a radio I know im close.

<input type="radio" id="radio1" name="radios"   checked>
<label for="radio1">$10</label>
<input type="radio" id="radio2" name="radios" >
<label for="radio2">$25</label>
<input type="radio" id="radio3" name="radios"  >
<label for="radio3">$50</label>
<input type="radio" id="radio4" name="radios" >
<label for="radio4">$100</label>
<input type="text" id="textInput">
<script>
<!-- to remove radio on text input click-->
$('#textInput').click(function () {
    $.each($('input[type=radio]'), function () {
         $(this).removeAttr("checked");
});
});
<!-- to remove text on text radio button click-->
$('input[type=radio]').click(function () {
    $.each($('#textInput'), function () {
        $(this).removeAttr("input");
});
});
</script>

• javascript
• jquery
• html
• forms

Share Improve this question Follow edited Feb 4, 2014 at 19:49 ʞɹᴉʞ ǝʌɐp 5,65088 gold badges4242 silver badges6565 bronze badges asked Feb 4, 2014 at 19:42 nicknick 1,25633 gold badges2121 silver badges4141 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

Just remove their value using val(). input isn't an attribute, it's a tag name.

$.each($('#textInput'), function () {
    $(this).val("");

Just use .val(), also you don't need $.each

$('input[type=radio]').click(function () {
    $('#textInput').val('');            
});

You have to use .val("") to set the text box value to empty.

Try this,

$('#textInput').each(function () {
   $(this).val("");
});