单击特定父复选框时，我们可以隐藏和显示子复选框吗

Question

我想在点击父复选框时显示特定的子复选框，但复选框的值来自数据库列

 <input name="service[]" type="checkbox" value="<?php echo $service['id']; ?>" id="" />

<?php 
echo $service['servicename'];
echo "<br>";
?>

<br><br>

<?php foreach ($activities as $activity) : ?>

    <input name="activity[]" type="checkbox" value="<?php echo $activity['id']; ?>" />

    <?php 
    echo $activity['nameofactivity'];
    echo "<br>"; 

我的输出：

• 1.所得税
• 返回
• 填充
• 2.GST
• 表格
• 提交表格

我想在点击 Incometax[1 st service] 时显示 Return and Flling [activity of 1 st service]，并在点击 [2nd service ]GST 时显示 Form and submitform[activity of 2 nd service]。但是当点击所得税[第一项服务]然后隐藏表单和提交表单[如果打开第二个服务]，当我点击 GST[第二个服务]然后隐藏退货和填写[如果打开第一个服务的活动]

谢谢。

Answer 1

作为摆脱困境的借口，我来整理了这个小演示，根据选中的父级来检查/取消选中复选框。您可以复制、保存和运行以下内容以查看它的实际效果或试试这个CodePen 演示

它利用querySelector 和querySelectorAll 来定位DOM 中的子元素和父元素。我希望这可以让您了解如何实现您的目标。

<?php
    /*
        dummy data used to generate 
        list with checkboxes and sub-lists...
    */
    $services = array(
        'Incometax'     =>  array(
            'Return',
            'Filling'
        ),
        'GST'           =>  array(
            'Form',
            'submitform'
        )
    );
?>
<html>
    <head>
        <title>Checkboxes...</title>
        <script>
            let _flags={
                capture:false,
                once:false,
                passive:true
            };


            document.addEventListener( 'DOMContentLoaded',function( evt ){

                let _form = document.forms.test;
                let _class= 'visible';

                Array.prototype.slice.call( _form.querySelectorAll( 'input[ type="checkbox" ]' ) ).forEach( function( el, i ){

                    if( el.dataset.id ) el.addEventListener( 'click', function( e ){

                        /* Hide all `OL` elements & uncheck  */
                        Array.prototype.slice.call( _form.querySelectorAll( 'li ol' ) ).forEach( function( n ){
                            if( n.classList.contains( _class ) ) {
                                /* Remove the class from child OL element that contains other input elements ( activities ) */
                                n.classList.remove( _class );

                                /* Uncheck the other service checkbox */
                                n.parentNode.querySelector( 'input[ type="checkbox" ]' ).checked=false;

                                /* uncheck all child activity checkboxes */
                                Array.prototype.slice.call( n.querySelectorAll( 'input[ type="checkbox" ]' ) ).forEach( function(chk){
                                    chk.checked=false;
                                } );
                            }
                        } );

                        /* Display relevant activity checkboxes */
                        if( e.target.checked ) e.target.parentNode.querySelector( 'ol' ).classList.toggle( _class );

                    }, _flags );
                });
            }, _flags );
        </script>
        <style>
            ol{display:none;}
            .visible{display:block;}
        </style>
    </head>
    <body>
        <form name='test'>

            <?php

                $html=array();
                $html[]='<ul>';

                foreach( $services as $service => $activities ){

                    $html[]='<li>';
                    $html[]=sprintf( "<input name='service[]' type='checkbox' data-id='%s' /><label for='%s'>%s</label>", $service, $service, $service );

                    $html[]='<ol>';
                    foreach( $activities as $index => $activity ){
                        $html[]=sprintf( "<li><input type='checkbox' name='activity[]' value='%s' /><label for='%s'>%s</label></li>", $activity, $activity, $activity );
                    }
                    $html[]='</ol>';
                    $html[]='</li>';
                }

                $html[]='</ul>';
                echo implode( PHP_EOL, $html );
            ?>

        </form>
    </body>
</html>