Clear Checkbox when Radio Button selection is Changed

Question

I am using a form builder with field IDs in Wordpress. I need to uncheck a specific checkbox if a specific radio button selection is changed. The radio button's field ID is 180. The checkbox's field ID is 640. Here's what I tried first:

<script type="text/javascript">
jQuery(document).ready(function($){
  $('input[name="item_meta[180]"]').change(function(){
    $('input[name="item_meta[640]"]').val('');
  })
})
</script>

Note that this script was originally written to change the value of a dropdown, not a menu. The only change I made to the code was changing "select" to "input" on line 3.

I've also tried changing

.val(''); 

to

.attr('checked', false); 

and also to

.removeAttr('checked');

None of these work. The checkbox remains checked when the radio button is changed. Does anyone have any ideas? Thanks in advance!

UPDATE: Here are the two relevant form fields in HTML:

<div id="frm_field_180_container" class="frm_form_field form-field  frm_required_field frm_top_container">
    <label  class="frm_primary_label">Pricing Categories
        <span class="frm_required">*</span>
    </label>
    <div class="frm_description">Select your meta-category then locate your entry fee in the subsequent dropdown.</div>
    <div class="frm_radio"><input type="radio" name="item_meta[180]" id="field_180-0" value="Independent Film &amp; Videos"   class="required" onclick="frmCheckDependent(this.value,'180')"/><label for="field_180-0">Independent Film & Videos</label></div>
    <div class="frm_radio"><input type="radio" name="item_meta[180]" id="field_180-1" value="Film / Video for TV &amp; Cable Production"   class="required" onclick="frmCheckDependent(this.value,'180')"/><label for="field_180-1">Film / Video for TV & Cable Production</label></div>
    <div class="frm_radio"><input type="radio" name="item_meta[180]" id="field_180-2" value="TV Ads, PSAs, Screenplays, New Media, Websites, etc."   class="required" onclick="frmCheckDependent(this.value,'180')"/><label for="field_180-2">TV Ads, PSAs, Screenplays, New Media, Websites, etc.</label></div>
    <div class="frm_radio"><input type="radio" name="item_meta[180]" id="field_180-3" value="Student Entry of Any Category (with 2 Additional Categories Free) - $45"   class="required" onclick="frmCheckDependent(this.value,'180')"/><label for="field_180-3">Student Entry of Any Category (with 2 Additional Categories Free) - $45</label></div>
</div>

and

<div id="frm_field_640_container" class="frm_form_field form-field  frm_top_container frm_last_third">
    <label class="frm_primary_label">Apply Early-Bird Discount
        <span class="frm_required"></span>
    </label>
    <div class="frm_opt_container"><div class="frm_checkbox" id="frm_checkbox_640-0"><input type="checkbox" name="item_meta[640][]" id="field_640-0" value="5"  /><label for="field_640-0">1-3 Categories: $5</label></div>
</div>

Answer 1

The following approach appears to work:

$('input[name="item_meta\\[180\\]"]').change(function(){
    $('input[name="item_meta\\[640\\]\\[\\]"]').prop('checked',false);
});

JS Fiddle demo.

Note that I removed the onclick (since they weren't defined, their absence generated errors, and if you're using jQuery why are you even using in-line event-handlers?). Also, the escaping of the square-brackets (using the \\ characters).

References:

• prop().

Answer 2

You've got a mismatch for the name of the checkbox, between your HTML and your JQuery . . .

HTML

<input type="checkbox" name="item_meta[640][]" id="field_640-0" value="5"  />

Here, the name attribute is item_meta[640][].

JS

$('input[name="item_meta[640]"]').val('');

Here, the name attribute is item_meta[640].

Because of that, the selector is not matching the checkbox. If you update you JQuery selector to $('input[name="item_meta[640][]"]'), it should work fine.

As noted by Dave Thomas, you are better going with .prop('checked', false); to uncheck the box.