jeudi 16 avril 2020

Select specific radio options when a checkbox is checked jQuery

So, I have a form with a group of dynamic radio buttons like below:

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

Now I have a checkbox above all of these radio button options:

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

When the above checkbox is check, I need to have all of the class elements of "NR" checked or all the inputs with a value of "0" checked, either way is fine with me unless there are 'best practices'. My jQuery is below and not working. :)

$('#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);
    }
});

Currently what doesn't work is if another radio option is selected, the checkbox stays checked.




Aucun commentaire:

Enregistrer un commentaire