引导弹出窗口不保存复选框

Bootstrap popover does not save ckeckboxes

本文关键字：保存 复选框 窗口      更新时间：2023-09-26

我需要在bootstrap 3上计算弹出窗口内容的:checked复选框。

问题是当我改变复选框和关闭弹出窗口它不保存。我尝试重新安装/销毁弹出窗口并动态更改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/

创建弹出窗口时，复制.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);
    });
});
相关文章：