jQuery set dropdown value on checkbox change

Question

I have a group of dynamic rows each with a dropdown and checkboxes and need to change the individual dropdown value of that row if all its checkboxes are selected.

Currently I can only get this to work if I select all checkboxes in all rows.

How can I make it so only a row's dropdown changes when the checkboxes it belongs to are all selected?

I setup this fiddle with markup of what works right now. Thanks for the help!

http://jsfiddle.net/uyv3mk7b/

<!--First row eventRegistrations[1]-->
<select class="regSelect" name="eventRegistrations[1].eventRegistrationStatusTypeID" id="registrationStatusSelect">
    <option value="1">Pending</option>
    <option value="2">Attended</option>
</select>
<input type="checkbox" class="regChecked" name="eventRegistrations[1].markAttendance[1].attendanceDate" value="1">9/21/14
<input type="checkbox" class="regChecked" name="eventRegistrations[1].markAttendance[2].attendanceDate" value="2">9/22/14 <br>

<!--There could be multiple dynamic rows whose input names increment like eventRegistrations[i]-->

<!--Next dynamic row eventRegistrations[2]-->    
<select class="regSelect" name="eventRegistrations[2].eventRegistrationStatusTypeID" id="registrationStatusSelect">
    <option value="1">Pending</option>
    <option value="2">Attended</option>
</select>
<input type="checkbox" class="regChecked" name="eventRegistrations[2].markAttendance[1].attendanceDate" value="1">10/23/14
<input type="checkbox" class="regChecked" name="eventRegistrations[2].markAttendance[2].attendanceDate" value="2">10/24/14

//Change dropdown to Attended when all of checkbox group is selected
//Currently only works when all 4 checkboxes are selected, not the 2 in each group/row
$('.regChecked:checked').length == $('.regChecked').length
$(".regChecked").change(function () {
    if ($('.regChecked:checked').length == $('.regChecked').length) {
        $('.regSelect').val('2');
    }
});

Fiddles are helpful, but please post your relevant code here so people don't have to leave the site in order to help you. — Stan Shaw
– Stan Shaw, Commented Oct 30, 2014 at 15:01
No problem. Cna you alter the way these are randomly generated? You have duplicate IDs on your page — Stan Shaw
– Stan Shaw, Commented Oct 30, 2014 at 15:09

vaso123 · Accepted Answer · 2014-10-30 15:14:39Z

You need to add a wrapper to your rows, like section, or div, and on change, you can loop through only the parents childrens collection.

Tyr this: http://jsfiddle.net/uyv3mk7b/3/

HTML

<!--First row eventRegistrations[1]-->
<section>
    <select class="regSelect" name="eventRegistrations[1].eventRegistrationStatusTypeID" id="registrationStatusSelect1">
        <option value="1">Pending</option>
        <option value="2">Attended</option>
    </select>
    <input type="checkbox" class="regChecked" name="eventRegistrations[1].markAttendance[1].attendanceDate" value="1">9/21/14
    <input type="checkbox" class="regChecked" name="eventRegistrations[1].markAttendance[2].attendanceDate" value="2">9/22/14 <br>
</section>
<!--There could be multiple dynamic rows whose input names increment like eventRegistrations[i]-->

<!--Next dynamic row eventRegistrations[2]-->    
<section>

    <select class="regSelect" name="eventRegistrations[2].eventRegistrationStatusTypeID" id="registrationStatusSelect2">
        <option value="1">Pending</option>
        <option value="2">Attended</option>
    </select>
    <input type="checkbox" class="regChecked" name="eventRegistrations[2].markAttendance[1].attendanceDate" value="1">10/23/14
    <input type="checkbox" class="regChecked" name="eventRegistrations[2].markAttendance[2].attendanceDate" value="2">10/24/14
</section>

jQuery

//Change dropdown to Attended when all of checkbox group is selected
$(".regChecked").change(function() {
    var checks = $(this).parent().find('.regChecked');
    var allChecked = true;
    $.each(checks, function(idx, value) {
        if (!$(this).is(':checked')) {
            allChecked = false;
        }
    });
    if (allChecked) {
        $(this).parent().find('.regSelect').val(2);
    } else {
        $(this).parent().find('.regSelect').val(1);
    }
});

//When dropdown value is Attended, select all in checkbox group
$("select").change(function() {
    if ($(this).val() === '2') {
        $(this).parent().find('.regChecked').prop('checked', true);
    }
});

Thanks a lot for your reply this helped a ton taking into account that there could be multiple dynamic rows!! Thank you!!

Y.Puzyrenko · Accepted Answer · 2014-10-30 15:16:21Z

1

You can add some sort of identifier to each group like

<select class="regSelect group-select-1" name="eventRegistrations[1].eventRegistrationStatusTypeID" id="registrationStatusSelect">
    <option value="1">Pending</option>
    <option value="2">Attended</option>
</select>
<input type="checkbox" class="regChecked group-1" name="eventRegistrations[1].markAttendance[1].attendanceDate" value="1">9/21/14
<input type="checkbox" class="regChecked group-1" name="eventRegistrations[1].markAttendance[2].attendanceDate" value="2">9/22/14 <br>

and then manipulate with this identifiers

 $(".group-1").change(function () {
    if ($('.group-1:checked').length == $('.group-1').length) {
        $('.group-select-1').val('2');
    }
 });

Fiddle

UPD Added fiddle with else cases, thx to Roberto Linares.

P.S. ids have to be unique

edited Oct 30, 2014 at 15:16

answered Oct 30, 2014 at 15:10

Y.Puzyrenko

2,1951 gold badge16 silver badges23 bronze badges

1 Comment

Roberto Linares Over a year ago

Also add the 'else' clause inc ase you need to return to the first option in the select.

Collectives™ on Stack Overflow

jQuery set dropdown value on checkbox change

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related