关于选中一个checkbox，其他的同级checkbox都被选中问题

Question

当我点击左边的省，右边的市全部被选中，现在我选中左边省，右边的市能被选中，但是当我移到其他的省后再移回之前被选中的省的时候，发现与之对应的市又没有被选中了，请问怎么解决这个bug啦？求大神指点！
HTML：

<div class="allArea">
    <button class="btnArea">全部地区</button>
</div>
<div class="mq-dropdown-menu-wrapper" style="position: absolute; left: 210px; top: 28px;display: none;">
    <div class="mq-dropdown-menu mq-dropdown-multi">
        <ul class="mq-dropdown-menu-root">

            <!--省-->

        </ul>
        <div class="mq-dropdown-action">
            <button class="mq-btn btn-block">选好了</button>
        </div>
    </div>

    <div class="mq-dropdown" style="position: absolute; top: 58px; left: 136px;">
        <div class="mq-dropdown-menu mq-dropdown-multi">
            <ul class="ul_city">

                <!--城市-->

            </ul>
        </div>
    </div>
</div>

JavaScript：

   var liProvince = '';
        for (var i = 0; i < provinceArr.length; i++) {
            var html = '<li>' + '<span>' + '<input type="checkbox">' + provinceArr[i]+ '</span>' + '</li>'
            liProvince += html;
        }
        $('.mq-dropdown-menu-root').html(liProvince);

        $('.mq-dropdown-menu-root li').mouseenter(function () {
//    $(this).addClass('provinceArr');
            $('.ul_city').children().remove();
            $('.ul_city').css('visibility', 'visible');
//
            var liCity = '';
            for (var i = 0; i < cityArr[$(this).index()].length; i++) {
                console.log( cityArr[$(this).index()],5258);
                var cityText = '<li>' + '<span>' + '<input type="checkbox">' + cityArr[$(this).index()][i] + '</span>' + '</li>'
                liCity += cityText;
            }
            $('.ul_city').html(liCity);
            $('.ul_city li').hover(function () {
//
                $(this).addClass('cityArr')
            }, function () {
                $(this).removeClass('cityArr');
            });
        })

        $('.mq-dropdown-menu-root li').hover(
                function () {
                    $(this).addClass('provinceArr');
                }, function () {
                    $(this).removeClass('provinceArr');
                });
        $('.btnArea').on('click', function () {
            $('.mq-dropdown-menu-wrapper').css('display', 'block')
        });
        $('.mq-dropdown-menu-root').on('click', 'li','input', function () {
//            方法一
            var num=$(this).index();
            console.log(num)
            var checkedVal = $(this).children('span').children("input").prop("checked");
            if (!checkedVal) {
                checkedVal = true;
                console.log($(this).index(),998);
                $(this).children('span').children("input").prop('checked', checkedVal);
                $('.ul_city li').find('input').prop('checked', checkedVal);
                else if (checkedVal = true) {
                checkedVal = false;
                $(this).children('span').children("input").prop('checked', checkedVal);
                $('.ul_city li').find('input').prop('checked', checkedVal);
            }
        })
        //阻止事件冒泡
        $('.mq-dropdown-menu-root').on('click', 'input', function (event) {
            event.stopImmediatePropagation();
        })

Answer 1

存一个缓存的变量用来切换省的时候记录选中的市啊。

还有就是你这代码耦合太紧，极度依赖dom结构，可能会不小心搞出其他问题，注意哦