首頁  >  問答  >  主體

javascript - 急!線上等! checkbox清單連動顯示的問題?

现在需要使用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的記錄,並預設勾選所有的記錄。

有什麼好方法呢,本人菜鳥,最好有程式碼可以參考,謝謝大家!

代言代言2695 天前854

全部回覆(3)我來回復

  • PHP中文网

    PHP中文网2017-06-26 10:52:20

    雷雷

    回覆
    0
  • 某草草

    某草草2017-06-26 10:52:20

    只提供思路

    監聽A的change事件,A改變時,取得其value,然後將對應的B顯示出來。

    可以預設B的所有checkbox元素不顯示,display:none,在每個B的checkbox上綁一個data屬性用來區分對應的A的value。那就只要在A改變的時候,就對應到B對應的checkbox的display屬性即可。

    回覆
    0
  • 黄舟

    黄舟2017-06-26 10:52:20

    謝謝兩位的回答,我把程式碼貼出來,供有需要的參考交流下

    <!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>
        <p id="p1">
            <input type="checkbox" value="1">A</input>
            <input type="checkbox" value="2">B</input>
            <input type="checkbox" value="3">C</input>
        </p>
    
        <p id="p2">
            <p class='hidden'>
                <input type="checkbox" value="1" data-parent-id="1" >a</input>
            </p>
            <p class='hidden'>
                <input type="checkbox" value="2" data-parent-id="1" >b</input>
            </p>
            <p class='hidden'>
                <input type="checkbox" value="3" data-parent-id="2" >c</input>
            </p>
            <p class='hidden'>
                <input type="checkbox" value="4" data-parent-id="2" >d</input>
            </p>
            <p class='hidden'>
                <input type="checkbox" value="5" data-parent-id="3" >e</input>
            </p>       
        </p>
    <script>
        $("#p1").children('input').each(function(){
           $(this).on('click',function(){
                var cValue = $(this).val();
                var isCheck = $(this).prop('checked');
                $("#p2 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>

    回覆
    0
  • 取消回覆