How to remove the selected radio button when clicking on an element within page using Jquery

Question

Hello guys,

Okay i'm stuck on something here.

This is the page i'm working on: https://www.passovermeal.org/

I have two radio buttons with text input fields attached to each.

If the second radio button is selected I would like to remove value from first text field.

Now if I click on an area on my page like a div with an id of #products I would like to remove the selected state of the second radio button and place the selected state back onto the first radio button and remove the amount that was entered into the second text area.

here are the set of radio buttons:

<div id="hiddenOtherAmountArea">
                        <input type="radio" value="9705" id="level_other" name="level_id" style="display:inline; margin-top:5px;" checked="checked" />
                        <!-- TODO: update value -->
                        <input type="text" id="other_amount" size="10" name="other_amount" value="" class="checked" />
                    </div>
                    <div id="otherAmountArea">
                        <input type="radio" value="9721" id="level_other" name="level_id" style="display:inline; margin-top:5px;" />Or enter another amount&nbsp;&nbsp;
                        <!-- TODO: update value -->
                        <input type="text" id="other_amount" size="15" name="other_amount" value="" class="otherChecked" />
                    </div>

Answer 1

First things first. You are re-using IDs. These must be unique for things to work properly. As it is, you have 2 elements named other_amount and two named level_other. This is a no-no.

EDIT: As you stated, you need the reused IDs. I added classes to the elements (with the same name) to reference. Not sure what effect the repetitive IDs will have, if any. Something like this should otherwise work (if I understood your question).

<div id="hiddenOtherAmountArea">
     <input type="radio" value="9705" id="level_other" class="level_other" name="level_id" style="display:inline; margin-top:5px;" checked="checked" />
     <!-- TODO: update value -->
     <input type="text" id="other_amount" class="other_amount" size="10" name="other_amount" value="" class="checked" />
</div>
<div id="otherAmountArea">
     <input type="radio" value="9721" id="level_other" class="level_other" name="level_id" style="display:inline; margin-top:5px;" />Or enter another amount&nbsp;&nbsp;
     <!-- TODO: update value -->
     <input type="text" id="other_amount" class="other_amount" size="15" name="other_amount" value="" class="otherChecked" />
</div>

You should be able to do something like this:

$('#hiddenOtherAmountArea .level_other').change(function() {
    $('#otherAmountArea .other_amount').val('');
});

$('#otherAmountArea .level_other').change(function() {
    $('#hiddenOtherAmountArea .other_amount').val('');
});

$('#products').click(function() {
    $('#hiddenOtherAmountArea .level_other').attr('checked','checked');
    $('#otherAmountArea .other_amount').val('');
})