在jQuery中单击复选框的复杂过滤

Question

我基本上有两个需要过滤的表：

Table 1 : Users
Table 2 : BrandUsers

现在，我制作了以下HTML：

<div class="pop-us">
        <div class="pop-j">
            <div class="pop-journey">
                <?php  foreach($users as $user) {?>
                    <div class="pop-first-btn"><input class="check-user" type="checkbox" name="" value="<?=$user['id'] ?>"><?=$user['username'] ?></div>
                <?php } ?>
            </div>
        </div>
        <div class="pop-city">
            <div class="pop-txt"><?=$this->translate('Please choose a user.')?></div>
            <!-- city -->

            <?php for ($i = 0; $i < count($states); $i++) { ?>
                <div class="pop-city-co">
                    <?php for ($j = 0; $j < count($states[$i]['citys']); $j++) { ?>
                        <label><input class="check-city" type="checkbox" name="" value="<?=$states[$i]['citys'][$j]['cityId']?>" data-id="<?=$i ?>"><?=$states[$i]['citys'][$j]['cityName']?></label>
                    <?php  } ?>
                </div>
            <?php  } ?>
        </div>
        <div class="modal-footer pop-footer">
            <button type="button" class="btn btn-default pop-close-us">Close</button>
            <button type="button" class="btn btn-primary pop-save-us">Save</button>
        </div>
    </div>

模态弹出窗口的左侧列出了所有用户...现在，我希望当在左侧单击每个复选框时，我想将UserId的值传递给函数并将其传递到我的查询中以搜索BrandUsers表...现在，我想在模式弹出窗口中显示两种类型的东西。

当用户单击1个用户时...所有品牌都列在右侧。 BrandUser表中存在usedId的品牌，我想在列表中选中它们，而不存在的品牌，我只想使其不选中...

当在左侧选中一个复选框，以便将参数UserId传递给DB，然后在模式弹出窗口的右侧显示内容时，如何生成事件？

有人可以帮我这个忙吗？

Answer 1

像这样使您的复选框。 请注意，我添加了一个具有用户ID的data-id属性。

<div class="pop-first-btn"><input class="check-user" type="checkbox" name="" data-id="<?=$user['id'] ?>" value="<?=$user['id'] ?>"><?=$user['username'] ?></div>

然后添加它以将点击处理程序附加到所有复选框

$('.check-city').on('click',function() {
    var user_id = $(this).data('id);
    $.ajax({
        url: 'http://myserver.com/action' + 'user_id=' + user_id;
        success: function(data) {
           // Update modal popup with data
        }
    });
});

希望这可以帮助。