Bootstrap popover不保存ckeckbox

Question

我需要计算:checkedbootstrap 3上弹出内容的复选框.

问题是,当我更改复选框并关闭弹出窗口时,它不会保存.我试图重新安装/销毁弹出窗口并动态更改content选项,但没有结果.

我还尝试用手创建空数组和计数复选框,push每次检查新数组,但没有结果,这是非常困难的方法.

JS:

$(function () {
    $('.item').popover({
        placement: 'bottom',
        html: true,
        content: function () {
            return $(this).find('.filters').html();
        }
    });

    $('#count').click(function() {
        var filter = $('.item input[type=checkbox]:checked').map(function () {
            return this.value;
        }).get();

        $('#res').text(filter);
    });
});

HTML:

<div class="item">
    <a href="#" onclick="return false;" class="btn btn-primary">click for popover</a>
    <div class="filters">
        <ul class="list-unstyled">
            <li>
                <input type="checkbox" value="1" checked="checked" id="filter1">
                <label for="filter1">Filter 1</label>
            </li>
            <li>
                <input type="checkbox" value="2" checked="checked" id="filter2">
                <label for="filter2">Filter 2</label>
            </li>
            <li>
                <input type="checkbox" value="3" id="filter3">
                <label for="filter2">Filter 3</label>
            </li>
        </ul>
    </div>
</div>

<br>
<a href="#" onclick="return false;" id="count">count</a>
<div id="res"></div>

CSS:

.filters {
    display: none;
}
.popover-content {
    width: 100px;
}

更新:http://jsfiddle.net/sirjay/0vetvfpz/

Answer 1

当您创建弹出窗口时,您复制.filtersdiv 的内容,这意味着您有两次.隐藏的一个,因为它隐藏在因为隐藏的.filtersdiv中 .filters { display: none; }

还有一个在你的弹出窗口中可见.

当你计算时,你实际上是在计算不可见的复选框而不是弹出框中的复选框.弹出窗口在.itemdiv 之外创建,因此与.item input[type=checkbox]:checked选择器不匹配.改变它.popover input[type=checkbox]:checked可能会做你想要的.

更新

我做了一些研究,发现这个用例并不是创作者想要的.这样做真的很棘手.但我已经设法为您找到了解决方案:

$(function () {
    $('.item').popover({
        placement: 'bottom',
        html: true,
        content: function () {
            return $(this).find('.filters').html();
        }
    });

    //Magic
    $(".item").on("shown.bs.popover",function(){
        $(".popover-content input").on("change",function(){
            if(this.checked){
                this.setAttribute("checked","checked");
            }else{
                this.removeAttribute("checked");
            }
            $(".filters").html($(".popover-content").html());
        });
    });


    $('#count').click(function() {
        var filter = $('.item input[type=checkbox]:checked').map(function () {
            return this.value;
        }).get();

        $('#res').text(filter);
    });
});