javascript - 点击下拉菜单多选

Question

我正在尝试弄清楚如何使下拉菜单功能具有多项选择。

目前我有这样的东西......

<div class="btn-group filter-buttons" id="fDropdown">
   <button data-toggle="dropdown" class="btn btn-default btn-block dropdown-toggle">Events
       <span class="caret"></span>
   </button>
   <ul class="dropdown-menu">
       <li><input type="radio" id="live1" name="feature" value="1" checked><label for="live1">1</label></li>
       <li><input type="radio" id="live2" name="feature" value="2"><label for="live2">2</label></li>
       <li><input type="radio" id="live3" name="feature" value="3"><label for="live3">3</label></li>
   </ul>
</div>

<script type="text/javascript">

    $(document).on('click', '#fDropdown', function (e) {
        e.stopPropagation();
    });

    (function($){
         var feature = '{{feature}}'; 
         //here feature is the value from the <li> chosen in the dropdown menu
         $('#fDropdown input').each(function(i,v){
            if ($(v).val() == feature){
                $(v).attr('checked', true);
                $(v).change();
            }
        });
    });

</script>

目前，它只能选择一个值。我不确定如何让它选择多个而无需 ctrl 单击或拖动。

Answer 1

将单选按钮更改为复选框:

<li>
  <input class="form-check-input" type="checkbox" value="" id="live1">
  <label class="form-check-label" for="live1">
    1
  </label>
</li>