选中复选框时选择特定的单选选项jQuery

Posted 2023-05-09

【中文标题】选中复选框时选择特定的单选选项jQuery

【英文标题】：Select specific radio options when a checkbox is checked jQuery

【发布时间】：2020-07-30 05:32:44

【问题描述】：

所以，我有一个包含一组动态单选按钮的表单，如下所示：

<input type="radio" style="margin-right: 3px" name="Manager_Staff_Score" id="Manager_Staff_Score_AM" value="4"><label for="Manager_Staff_Score_AM" style="padding-right: 15px"> AM (4)</label>
<input type="radio" style="margin-right: 3px" name="Manager_Staff_Score" id="Manager_Staff_Score_AE" value="3"><label for="Manager_Staff_Score_AE" style="padding-right: 15px"> AE (3)</label>
<input type="radio" style="margin-right: 3px" name="Manager_Staff_Score" id="Manager_Staff_Score_PA" value="2"><label for="Manager_Staff_Score_PA" style="padding-right: 15px"> PA (2)</label>
<input type="radio" style="margin-right: 3px" name="Manager_Staff_Score" id="Manager_Staff_Score_UR" value="1"><label for="Manager_Staff_Score_UR" style="padding-right: 15px"> UR (1)</label>
<input type="radio" style="margin-right: 3px" name="Manager_Staff_Score" id="Manager_Staff_Score_NR" value="0" class="NR"><label for="Manager_Staff_Score_NR" style="padding-right: 15px"> NOT RATABLE</label>

<input type="radio" style="margin-right: 3px" name="employee_cce_score_100" id="employee_cce_score_AO_1" value="5" <label for="employee_cce_score_AO_1" style="padding-right: 15px"> AO (5)</label>
    <input type="radio" style="margin-right: 3px" name="employee_cce_score_100" id="employee_cce_score_AM_1" value="4"><label for="employee_cce_score_AM_1" style="padding-right: 15px"> AM (4)</label>
    <input type="radio" style="margin-right: 3px" name="employee_cce_score_100" id="employee_cce_score_AE_1" value="3"><label for="employee_cce_score_AE_1" style="padding-right: 15px"> AE (3)</label>
    <input type="radio" style="margin-right: 3px" name="employee_cce_score_100" id="employee_cce_score_PA_1" value="2"><label for="employee_cce_score_PA_1" style="padding-right: 15px"> PA (2)</label>
    <input type="radio" style="margin-right: 3px" name="employee_cce_score_100" id="employee_cce_score_UR_1" value="1"><label for="employee_cce_score_UR_1" style="padding-right: 15px"> UR (1)</label>
    <input type="radio" style="margin-right: 3px" name="employee_cce_score_100" id="employee_cce_score_NR_1" value="0" class="NR"><label for="employee_cce_score_NR_1" style="padding-right: 15px"> NOT RATABLE</label>

<input type="radio" style="margin-right: 3px" name="employee_cce_score_200" id="employee_cce_score_AO_2" value="5" <label for="employee_cce_score_AO_2" style="padding-right: 15px"> AO (5)</label>
<input type="radio" style="margin-right: 3px" name="employee_cce_score_200" id="employee_cce_score_AM_2" value="4"><label for="employee_cce_score_AM_2" style="padding-right: 15px"> AM (4)</label>
    <input type="radio" style="margin-right: 3px" name="employee_cce_score_200" id="employee_cce_score_AE_2" value="3"><label for="employee_cce_score_AE_2" style="padding-right: 15px"> AE (3)</label>
    <input type="radio" style="margin-right: 3px" name="employee_cce_score_200" id="employee_cce_score_PA_2" value="2"><label for="employee_cce_score_PA_2" style="padding-right: 15px"> PA (2)</label>
    <input type="radio" style="margin-right: 3px" name="employee_cce_score_200" id="employee_cce_score_UR_2" value="1"><label for="employee_cce_score_UR_2" style="padding-right: 15px"> UR (1)</label>
    <input type="radio" style="margin-right: 3px" name="employee_cce_score_200" id="employee_cce_score_NR_2" value="0" class="NR"><label for="employee_cce_score_NR_2" style="padding-right: 15px"> NOT RATABLE</label>

现在我在所有这些单选按钮选项上方都有一个复选框：

<input type="checkbox" name="not_ratable" id="not_ratable" class="form-control">

当上面的复选框被选中时，我需要选中“NR”的所有类元素或选中所有值为“0”的输入，无论哪种方式都适合我除非有“最佳实践”。我的 jQuery 在下面并且不工作。 :)

$('#not_ratable').click(function () 
    $('.NR').prop('checked',this.checked);
);

$('.NR').change(function () 
    if ($('.NR:checked').length == $('.NR').length)
        $('#not_ratable').prop('checked',true);
    
    else 
        $('#not_ratable').prop('checked',false);
    
);

目前不起作用的是，如果选择了另一个单选选项，则复选框保持选中状态。

【问题讨论】：

第一个解决方案对我有用。

您在哪里执行与您的页面标记相关的 javascript？可能的文件准备问题

我觉得很好jsfiddle.net/8bjx740z

确保你在$(document).ready中运行代码

或委托事件处理程序，因为它们是“动态单选按钮”

【参考方案1】：

要在选中另一个单选选项时取消选中该复选框，您可以执行以下操作：

 $("input[type='radio'][class!='NR']").click(function()
    $("#not_ratable").prop("checked", false);
 );

【讨论】：

我是将它添加到我的函数中还是用它替换我拥有的东西？

@DavidJacobson 你把它添加到你的函数中。

嗯，我这样做了，但是当我单击不同的单选选项时，它并没有取消选中复选框元素。其他单选选项也需要类标签吗？？

奇怪，它在这里工作 jsfiddle.net/zd12xhwo 而我没有改变你的任何代码。

奇怪，我复制了 jsfiddle 并开始工作。猜猜我的代码中有一些不同的东西。非常感谢！