javascript - 如何根据父和子复选框选择将淡入和淡出效果应用于选择控件？

Question

我有一个选择控件，在加载表单时应隐藏该控件。我有一个父复选框和一组子复选框。我想要实现的是，除非选中父复选框或子复选框中的至少一个(或多个)复选框，否则不应显示选择控件，而应将其保持隐藏。如果父复选框或子复选框中的任何一个(或多个)复选框被选中，则应显示选择控件。显示选择控件的另一个条件是 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-->

您能在这方面帮助我吗？提前致谢。 在检查父复选框时检查所有复选框的 jQuery 代码如下:

$("#ckbCheckAll").click(function () { 
  $(".ez-checkbox input").toggleClass("ez-checked", this.checked);
    if ($(this).is(':not(:checked)'))
      $(".ez-checkbox input").removeAttr('checked');
    if($(this).is(':checked'))
      $(".ez-checkbox input").attr('checked','checked');
    $(".ez-checkbox input").closest("div").toggleClass("ez-checked", this.checked);;
});

Answer 1

我希望这会有所帮助...我已经修改了您的 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，达到同样的效果。