jQuery设置复选框更改时的下拉值

jQuery set dropdown value on checkbox change

本文关键字：设置 复选框 jQuery      更新时间：2023-09-26

我有一组动态行，每个行都有下拉列表和复选框，如果选中了所有复选框，则需要更改该行的单个下拉值。

目前，只有选中所有行中的所有复选框，我才能使其工作。

当一行所属的复选框全部选中时，如何使其仅更改下拉列表？

我用现在有效的标记设置了这个小提琴。谢谢你的帮助！

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

您需要向行添加一个包装器，如section或div，并且在更改时，您只能循环通过父子集合。

Tyr这个：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);
    }
});

您可以向每个组添加某种标识符，如

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

然后用这个标识符操作

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

Fiddle

UPD为Roberto Linares添加了其他情况的小提琴。

p.S.id必须是唯一的

相关文章：