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

Clear Checkbox when Radio Button selection is Changed

本文关键字：清除 复选框 选择 单选按钮      更新时间：2023-09-26

我正在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行将"select"更改为"input"。

我也试过改变

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

以下方法似乎有效：

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

JS Fiddle演示。

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

参考文献：

  • prop()

您的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);来取消选中该框。

相关文章：