Fatal编程技术网
  • twitter-bootstrap/
  • Twitter bootstrap 在Twitter引导下拉菜单中包含复选框

Twitter bootstrap 在Twitter引导下拉菜单中包含复选框

twitter-bootstrap drop-down-menu

Twitter bootstrap 在Twitter引导下拉菜单中包含复选框,twitter-bootstrap,drop-down-menu,Twitter Bootstrap,Drop Down Menu,我想在Twitter引导下拉菜单中包含复选框，但我无法获取菜单文本（在 内维尔试试看 但是有一行javascript可以解决Oleg中的问题，答案是：将您的复选框包装成A标记，如下所示： <li> <a> <label> <input type="checkbox"> Some text </label> </a> </l

我想在Twitter引导下拉菜单中包含复选框，但我无法获取菜单文本（在 内维尔

试试看
但是有一行javascript可以解决Oleg中的问题，答案是：

将您的复选框包装成A标记，如下所示：

<li>
    <a>
        <label>
            <input type="checkbox">
            Some text
        </label>
    </a>
</li>
尝试此jquery插件进行引导：


$（函数（）{
$（'#lstFruits'）。多选({
includeSelectAllOption:true
});
});
选择01
选择02
选择03
选择04
选择05
Heare就是一个很好的例子：

heare就是代码：

var选项=[]；
$（'.下拉菜单a'）。在（'单击'）上，函数（事件）{
var$target=$（event.currentTarget），
val=$target.attr（'data-value'），
$inp=$target.find（'input'），
idx；
if（（idx=options.indexOf（val））>-1）{
选项。拼接（idx，1）；
setTimeout（函数（）{
$inp.prop（'checked'，false）
}, 0);
}否则{
选项。推送（val）；
setTimeout（函数（）{
$inp.prop（'checked'，true）
}, 0);
}
$（event.target）.blur（）；
返回false；
})；




    

  • 

    • 

  • 

    • 

  • 

    • 

  • 

    • 

  • 

    • 

  • 

    •
谢谢Oleg，看起来不错。我知道2097问题的问题，我认为这不会很难解决。我实际上想使用菜单文本并添加一个新的css规则，效果很好。再次感谢您的帮助，Neville看起来问题已经更新了。现在您只需将
下拉菜单表单
类添加到父级
，效果非常好。这是实现这一点的理想方法。这样就不需要修改bootstrap.js注意，这是不鼓励的，因此答案应该是搜索解决方案的终点（与另一个参考的中途停留相比，随着时间的推移，它往往会变得过时）请考虑在这里添加一个独立的概要，保持链接作为参考。这个答案可能是令人沮丧的，但是Bootstrap多选择插件是很棒的！@ KLopoptRA这个问题的唯一答案是链接。抱怨。@ Bardware只是一个温和的提醒站点规则-所以为什么你觉得需要粗鲁？这是最好的答案。公认的答案充满了错误。太粗俗了。是的，这个效果最好。顺便说一下，bootstrap有一个checkbox类来排列项目，因此您可能不需要定义自己的CSS。除了使用
标记之外，我添加了
。checkbox
但覆盖了
页边距顶部
和
页边距底部
，以使间距更自然。例如：
在Windows 10上运行Chrome时，每个项目的复选框都没有与相应的文本垂直对齐。寻找符合用户期望的东西的人需要稍微修改一下这个例子。

<li>
    <a>
        <label>
            <input type="checkbox">
            Some text
        </label>
    </a>
</li>



.dropdown-menu input {margin-top: -4px;}
.dropdown-menu label {margin: 0;}



<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
    <link href="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css" rel="stylesheet" type="text/css" />
    <script src="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js" type="text/javascript"></script>

        <script type="text/javascript">
            $(function()   {
                $('#lstFruits').multiselect({
                    includeSelectAllOption: true
            });
        });
        </script>

</head>
<body>

    <select id="lstFruits" multiple="multiple">
        <option value="1">Choice01</option>
        <option value="2">Choice02</option>
        <option value="3">Choice03</option>
        <option value="4">Choice04</option>
        <option value="5">Choice05</option>
    </select>

</body>
</html>