php - 下拉列表框中的复选框内的复选框

标签 php javascript jquery html ajax

我正在努力在复选框内创建复选框,所有复选框都应显示在下拉列表框中。我成功地在下拉列表框中创建了几个复选框。点击链接 http://vignesh.gvignesh.org/metroplots/drp/drpcheck.php

现在我正在尝试创建一个复选框,一旦用户单击一个复选框,该复选框就会出现。例如,如果用户检查文档,则该复选框下方应出现几个复选框。

Eg.  []Documents  (if user checks main,  the sub checkboxes should appear)
           []Doc 1 
           []Doc 2
           []Doc 3
     []Phots (if user checks) 
           []photo 1
           []photo 2
           []photo 3

如何通过 javascript 或 jquery 实现此目的。

提前致谢。 !!

最佳答案

有不同的方法可以做到这一点。这就是我所做的:

<html>

    <head>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

        <script type="text/javascript">

            $(document).ready(function(){

                $('.team').on('click',function(){
                    if($(this).is(':checked')){
                        $(this).next().next().show();
                    }else{
                        $(this).next().next().hide();
                    }
                });
            });


        </script>

    </head>

    <body>

        <form name="FootballClubs">

            <input type="checkbox" class="team" value="RealMadrid"/>Real Madrid<br />
            <div style="padding:10px 10px 10px 15px;display:none;">     
                <input type="checkbox" class="player" value="CR"/>Cristiano Ronaldo<br />
                <input type="checkbox" class="player" value="SA"/>Shabi Alanso<br />
                <input type="checkbox" class="player" value="IC"/>Iker Casillias<br />
            </div>  
            <input type="checkbox" class="team" value="ManCity"/>Man City<br /> 
            <div style="padding:10px 10px 10px 15px;display:none;">
                <input type="checkbox" class="player" value="SA"/>Sergio Aguero<br />
                <input type="checkbox" class="player" value="SM"/>Super Mario<br />
            </div>
        </form>

    </body>

</html>

这是一个完整的工作示例。此外,当选中的元素再次隐藏时,您可以取消选中它们。

关于php - 下拉列表框中的复选框内的复选框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13097673/

相关文章:

javascript - 多次更改段落以匹配幻灯片中更改的图像

javascript - AngularJS 过滤器将日期与 ID 进行比较 - ng-show

jQuery的scrollTop只能工作一次

jquery - 淡出一张图像,淡入第二张图像

javascript - 在网格元素上切换动画并淡入/淡出其他元素

php - Javascript 将文本从数据库转换为超链接

PHP在数据库中插入图片上传url

php - 包含两个字段的 MySQL 查询

javascript - WordPress JSON API - 请求 header 错误

javascript - Jest Enzyme setState of memoryRouter dependent