问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

急！在线等！checkbox列表联动显示的问题？

头像
wryu
    501019
    现在需要使用checkbox进行两个复选框列表的联动显示，假如有两个复选框列表要显示两个结果集。

    A复选框列表显示数组a:

    [

    {id:'1',name:'A'},
{id:'2',name:'B'},
{id:'3',name:'C'}

    ];

    B复选框列表显示数组b:

    [

    {parentId:'1',childName:'a'},
{parentId:'1',childName:'b'},
{parentId:'2',childName:'c'},
{parentId:'2',childName:'d'},
{parentId:'3',childName:'e'}

    ];
    注意：数组b中的parentId对应数组a中的id

    现在想当点击A复选框列表中的某一项时，B复选框列表会根据A复选框列表勾选的id值显示出对应parentId的记录，并默认勾选所有的记录。

    有什么好方法呢，本人菜鸟，最好有代码可以参考，谢谢大家！

    javascripthtml
    阅读 3.7k
    3 个回答
    得票最新
    头像
    TMaize
      3731614
      ✓ 已被采纳

      图片描述

      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="div1">
    <input type="checkbox" value="1"> A
    <input type="checkbox" value="2"> B
    <input type="checkbox" value="3"> C
</div>

<div id="div2">
    <input type="checkbox" value="a" data-parent="1"> a
    <input type="checkbox" value="b" data-parent="1"> b
    <input type="checkbox" value="c" data-parent="2"> c
    <input type="checkbox" value="d" data-parent="2"> d
    <input type="checkbox" value="e" data-parent="3"> e
</div>
<script>

    var checks1 = document.getElementById("div1").getElementsByTagName("input");
    var checks2 = document.getElementById("div2").getElementsByTagName("input");

    for (var i=0;i<checks1.length;i++){
        checks1[i].onclick = function () {
            var cValue = this.value;
            var isCheck = this.checked;
            for (var j=0;j<checks2.length;j++){
                if (checks2[j].dataset.parent==cValue){
                    checks2[j].checked =isCheck;
                }
            }
        }
    }
</script>

</body>
</html>
      头像
      梦梦她爹
        1.8k1614

        只提供思路

        监听A的change事件，A改变时，获取其value，然后将相应的B显示出来。

        可以默认B的所有checkbox元素不显示，display:none，在每个B的checkbox上绑一个data属性用来区分对应的A的value。那么只要在A改变的时候，相应改变B对应的checkbox的display属性即可。

        头像
        wryu
          501019

          谢谢两位的回答，我把代码贴出来，供有需要的参考交流下

          <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="./jquery-3.1.1.min.js"></script>
    <style type="text/css">
        .show{
            display: block;
        }
        .hidden{
            display: none;
        }
    </style>
</head>
<body>
    <div id="div1">
        <input type="checkbox" value="1">A</input>
        <input type="checkbox" value="2">B</input>
        <input type="checkbox" value="3">C</input>
    </div>

    <div id="div2">
        <div class='hidden'>
            <input type="checkbox" value="1" data-parent-id="1" >a</input>
        </div>
        <div class='hidden'>
            <input type="checkbox" value="2" data-parent-id="1" >b</input>
        </div>
        <div class='hidden'>
            <input type="checkbox" value="3" data-parent-id="2" >c</input>
        </div>
        <div class='hidden'>
            <input type="checkbox" value="4" data-parent-id="2" >d</input>
        </div>
        <div class='hidden'>
            <input type="checkbox" value="5" data-parent-id="3" >e</input>
        </div>       
    </div>
<script>
    $("#div1").children('input').each(function(){
       $(this).on('click',function(){
            var cValue = $(this).val();
            var isCheck = $(this).prop('checked');
            $("#div2 input").each(function(){
                if(cValue == $(this).data('parentId')){
                    $(this).attr('checked',isCheck);
                    if(isCheck){
                        $(this).parent().removeClass('hidden').addClass('show');
                    }
                    else{
                        $(this).parent().removeClass('show').addClass('hidden');
                    }
                }
            });
       })
    });
</script>

</body>
</html>
          撰写回答
          你尚未登录，登录后可以
          • 和开发者交流问题的细节
          • 关注并接收问题和回答的更新提醒
          • 参与内容的编辑和改进，让解决方法与时俱进
          推荐问题