Javascript 如何基于父复选框和子复选框选择将淡入淡出效果应用于选择控件？

我有一个select控件，它应该在窗体加载时隐藏。我有一个父复选框和一组子复选框。我想要实现的是，除非选中了父复选框或子复选框中的至少一个或多个复选框，否则不应显示选择控件，而应将其隐藏。如果选中父复选框或子复选框中的任何一个或多个复选框，则应显示选择控件。显示选择控件的另一个条件是id为site_id的字段应仅包含值XYZ。如果它有一些不同的值，则即使选择了父复选框或子复选框中的任何一个或多个复选框，也不应显示选择控件。我的代码片段如下所示：

<!--The code below is for parent checkbox-->
<input type="hidden" value="XYZ" id="site_id" name="site _id">
<p class="custom-form">
 <input class="custom-check" type="checkbox" name="" id="ckbCheckAll">
 <a class="drop" href="#">more</a>
</p> 
<!--Parent checkbox code ends here-->
<!--The code below is for select control-->
<select name="select_option">
  <option value="0">--Select Action--</option>
  <option value="1" class="delete_user" href="#deletePopContent">Delete User</option>
  <option value="2" class="disable_user" href="#disablePopContent">Disable User</option>
  <option value="3" class="update_user" href="#updatePopContent">Update Class and Section</option>
  <option value="4" class="default_user" href="#defaultPopContent">Change Password</option>
</select>
<!--Select code ends here-->
<!--The code below is for child checkboxes-->
<input class="custom-check" type="checkbox" name="item[]" id="" value="d3c1ac9ac08da86e73258a11a43251af">
<input class="custom-check" type="checkbox" name="item[]" id="" value="b993166c4795b3bfe96640e55e8dcbbc">
<input class="custom-check" type="checkbox" name="item[]" id="" value="77d4721ada7677feda77a250c7cee1c4">
<input class="custom-check" type="checkbox" name="item[]" id="" value="68d6e7a8c09c77c5fec49945beaea4f8">
<input class="custom-check" type="checkbox" name="item[]" id="" value="85634bc9cdbcb6b39eaf4946b99db5de">
<input class="custom-check" type="checkbox" name="item[]" id="" value="bb1a20794d65966b950c5933100496ce">
<input class="custom-check" type="checkbox" name="item[]" id="" value="59ee376a9d126a26b350fff3110ea825">
<input class="custom-check" type="checkbox" name="item[]" id="" value="428895b1ae5f3226345e6c6f256c7c85">
<!--In the same manner other child checkboxes will come-->
<!--Child checkboxes code ends here-->

---

我希望这有助于。。。我修改了您的HTML，在子复选框周围包含一个div，以及隐藏的选择框的ID字段：

<!--The code below is for parent checkbox-->
<input type="hidden" value="XYZ" id="site_id" name="site _id">
<p class="custom-form">
 <input class="custom-check" type="checkbox" name="" id="ckbCheckAll">
 <a class="drop" href="#">more</a>
</p> 
<!--Parent checkbox code ends here-->
<!--The code below is for select control-->
<select name="select_option" id="hiddenSelect">
  <option value="0">--Select Action--</option>
  <option value="1" class="delete_user" href="#deletePopContent">Delete User</option>
  <option value="2" class="disable_user" href="#disablePopContent">Disable User</option>
  <option value="3" class="update_user" href="#updatePopContent">Update Class and Section</option>
  <option value="4" class="default_user" href="#defaultPopContent">Change Password</option>
</select>
<!--Select code ends here-->

<!--The code below is for child checkboxes-->
<div id="childBoxes">
    <input class="custom-check" type="checkbox" name="item[]" id="" value="d3c1ac9ac08da86e73258a11a43251af"/>
    <input class="custom-check" type="checkbox" name="item[]" id="Checkbox1" value="b993166c4795b3bfe96640e55e8dcbbc"/>
    <input class="custom-check" type="checkbox" name="item[]" id="Checkbox2" value="77d4721ada7677feda77a250c7cee1c4"/>
    <input class="custom-check" type="checkbox" name="item[]" id="Checkbox3" value="68d6e7a8c09c77c5fec49945beaea4f8"/>
    <input class="custom-check" type="checkbox" name="item[]" id="Checkbox4" value="85634bc9cdbcb6b39eaf4946b99db5de"/>
    <input class="custom-check" type="checkbox" name="item[]" id="Checkbox5" value="bb1a20794d65966b950c5933100496ce"/>
    <input class="custom-check" type="checkbox" name="item[]" id="Checkbox6" value="59ee376a9d126a26b350fff3110ea825"/>
    <input class="custom-check" type="checkbox" name="item[]" id="Checkbox7" value="428895b1ae5f3226345e6c6f256c7c85"/>
    <!--In the same manner other child checkboxes will come-->
</div>
<!--Child checkboxes code ends here-->

我不清楚上面的javascript，因为它似乎试图切换复选框显示，但在其他方面与您的问题无关。然而，对于您所说的问题，这里有一个解决方案：

<script>
    $('#hiddenSelect').hide();
    if ($('#site_id').val() == "XYZ") {

        $("#ckbCheckAll").click(function () {
            displaySelect();
        });

        $('#childBoxes :input').click(function () {
            displaySelect();
        });

        function displaySelect() {
            var childChecked = $('#childBoxes').find('input[type=checkbox]:checked');
            var parentChecked = $('#ckbCheckAll').is(':checked');

            if (childChecked.length > 0 || parentChecked) {
                $('#hiddenSelect').show();
            } else {
                $('#hiddenSelect').hide();
            }
        }
    }
</script>

---

编辑：阅读问题标题后，您可以使用$'hiddenSelect'.fadeIn'400'或$'hiddenSelect'.fadeOut'400'代替.show和.hide，效果相同。

您已经尝试过什么？你能给我们看看你的Javascript代码吗？@Nunners:我已经用我编写的jQuery代码修改了我的问题，以选中和取消选中所有子复选框upun onchange event of parent复选框。

<script>
    $('#hiddenSelect').hide();
    if ($('#site_id').val() == "XYZ") {

        $("#ckbCheckAll").click(function () {
            displaySelect();
        });

        $('#childBoxes :input').click(function () {
            displaySelect();
        });

        function displaySelect() {
            var childChecked = $('#childBoxes').find('input[type=checkbox]:checked');
            var parentChecked = $('#ckbCheckAll').is(':checked');

            if (childChecked.length > 0 || parentChecked) {
                $('#hiddenSelect').show();
            } else {
                $('#hiddenSelect').hide();
            }
        }
    }
</script>