Question

我有一个带有多个复选框的bootstrap下拉列表。当我关闭并重新打开它时，默认情况下都会取消选中复选框。我想看看当我重新打开下拉列表时先前检查了哪些复选框

HTML：

 <ul class="inline unstyled">
     <li class="dropdown">
         <a href="#" data-toggle="dropdown" class="dropdown-toggle select-value" data-placement="bottom">
             -- Select values to show -- <b class="pull-right caret"></b>
         </a>
     </li>
 </ul>
 <div id="popover_select_values" style='display: none'>
    <ul class="scrollable-menu unstyled">
              <li>
                  <label class="checkbox1"> checkbox1
                     <input type="checkbox" id="checkbox1"/>
                  </label>
              </li>
              <li>
                  <label class="checkbox1"> checkbox2
                     <input type="checkbox" id="checkbox2"/>
                  </label>
              </li>
                  <li>
                  <label class="checkbox1"> checkbox3
                     <input type="checkbox" id="checkbox3"/>
                  </label>
              </li>
    </ul>
 </div>

JQuery：

   $('.select-value').popover({
    html: true,
    content: function () {
    return $('#popover_select_values').html();
    }
});

Answer 1

popover的工作方式是每次单击链接时都会创建新版本的内容。它需要HTML并复制它。

您可以使用下拉插件吗？

或者，您可以在关闭弹出窗口时存储所选值，并在打开它时再次设置它们。你可以使用 shown.bs.popover和hidden.bs.popover次活动。

Answer 2

您需要保存已选中复选框的状态。请尝试以下示例：https://jsfiddle.net/lolptdr/aof88p65/#base

HTML

<div class="container">
<div class="row">
    <div class="col-lg-12">
        <div class="button-group">
            <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-cog"></span>  <span class="caret"></span>

            </button>
            <ul class="dropdown-menu">
                <li><a href="#" class="small" data-value="option1" tabIndex="-1"><input type="checkbox"/>&nbsp;Option 1</a>

                </li>
                <li><a href="#" class="small" data-value="option2" tabIndex="-1"><input type="checkbox"/>&nbsp;Option 2</a>

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

JS

var options = [];
$('.dropdown-menu a').on('click', function (event) {

var $target = $(event.currentTarget),
    val = $target.attr('data-value'),
    $inp = $target.find('input'),
    idx;

if ((idx = options.indexOf(val)) > -1) {
    options.splice(idx, 1);
    setTimeout(function () {
        $inp.prop('checked', false)
    }, 0);
} else {
    options.push(val);
    setTimeout(function () {
        $inp.prop('checked', true)
    }, 0);
}

$(event.target).blur();
    console.log(options);
    return false;
});

Answer 3

编辑回答：

它获取当前复选框的索引并相应地更改相应的主复选框。无论身份证如何，它都会有效：

$(document).on('change', '.popover-content input[type=checkbox]', function() {
    var idx = $(this).closest('ul').find('input[type=checkbox]').index(this);
    var mainCbs = $('#popover_select_values input[type=checkbox]');
    if($(this).is(':checked'))
       mainCbs.eq(idx).attr('checked', 'checked');
    else
        mainCbs.eq(idx).removeAttr('checked');
});

jsfiddle DEMO

OLD ANSWER：

$(document).on('change', '.popover-content input[type=checkbox]', function() {
    var idx = parseInt($(this).prop('id').split('checkbox')[1])-1;
    var mainCbs = $('#popover_select_values input[type=checkbox]');
    if($(this).is(':checked'))
       mainCbs.eq(idx).attr('checked', 'checked');
    else
        mainCbs.eq(idx).removeAttr('checked');
});

jsfiddle DEMO

带有多个复选框的Jquery下拉列表不会保存状态

3 个答案: