更改单选按钮选择时清除复选框

Question

我在 Wordpress 中使用带有字段 ID 的表单生成器。如果更改了特定的单选按钮选择，我需要取消选中特定的复选框。单选按钮的字段 ID 是 180。复选框的字段 ID 是 640。这是我首先尝试的：

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

请注意，此脚本最初是为了更改下拉菜单的值，而不是菜单。我对代码所做的唯一更改是在第 3 行将“选择”更改为“输入”。

我也尝试过改变

.val(''); 

到

.attr('checked', false); 

还有

.removeAttr('checked');

这些都不起作用。当单选按钮更改时，复选框保持选中状态。有没有人有任何想法？提前致谢！

更新：以下是 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>

和

<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

以下方法似乎有效：

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

JS Fiddle demo.

请注意，我删除了 onclick（因为它们没有被定义，它们的缺失会产生错误，如果您使用的是 jQuery为什么你甚至使用内联事件处理程序？ ）。此外，方括号的转义（使用\\ 字符）。

参考资料：

• prop()。

Answer 2

您的 HTML 和 JQuery 之间的复选框名称不匹配。 . .

HTML

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

这里的name属性是item_meta[640][]。

JS

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

这里的name属性是item_meta[640]。

因此，选择器与复选框不匹配。如果您将 JQuery 选择器更新为 $('input[name="item_meta[640][]"]')，它应该可以正常工作。

正如 Dave Thomas 所说，您最好使用 .prop('checked', false); 取消选中该框。