在引导程序复选框中启用多选选项？

Question

我正在创建一个Web应用程序，其中bootstrap用于设计。我正在使用bootstrap.check-box.js和bootstrap.check-box.css

创建一个复选框

Using the code 

$('input[type="checkbox"]').checkbox();

我的HTML代码是

 <div id="popover-cnt-detect" class="hide">
     <ul class="detectul">
         <li class="listitems"> <div class="checkbox"><label><input name="check[]" type="checkbox" class="checkbox" value="Frontal">&nbsp;Frontal Face</label></div></li>
         <li class="listitems"> <div class="checkbox"><label><input name="check[]" type="checkbox" class="checkbox" value="Profile"> &nbsp;Profile Face</label></div></li>
         <li class="listitems"> <div class="checkbox"><label><input name="check[]" type="checkbox" class="checkbox" value="Eyes">&nbsp;Eyes</label> </div></li>
         <li class="listitems"> <div class="checkbox"><label><input name="check[]" type="checkbox" class="checkbox" value="Head">&nbsp;Head</label></div></li>
     </ul>
     <button type="submit" class="btn alert-continue-btn ">Continue</button>
 </div>

这是弹出该复选框div的jquery代码..

$("#detect").popover({
        html: true, 
        content: function() { return $('#popover-cnt-detect').html(); }
    });
    $("#detect").click(function()
    {
    $(this).popover({
            html: true, 
            trigger: 'click',
            content: function() { return $('#popover-cnt-detect').html(); }
        });

    return false;
    });

现在，我需要知道的是，此复选框仅供单选，我无法在该复选框中选择多个选项。

所以，请告诉朋友们如何在check-boxes中提供多个选择选项。 提前谢谢......

Answer 1

工作jsFiddle example

代码

HTML

<div id="popover-cnt-detect" class="hide">
     <div class="checkbox"><label><input type="checkbox" class="checkbox select-all">Select All</label></div>
     <ul class="detectul">
         <li class="listitems"> <div class="checkbox"><label><input name="check[]" type="checkbox" class="checkbox" value="Frontal">&nbsp;Frontal Face</label></div></li>
         <li class="listitems"> <div class="checkbox"><label><input name="check[]" type="checkbox" class="checkbox" value="Profile"> &nbsp;Profile Face</label></div></li>
         <li class="listitems"> <div class="checkbox"><label><input name="check[]" type="checkbox" class="checkbox" value="Eyes">&nbsp;Eyes</label> </div></li>
         <li class="listitems"> <div class="checkbox"><label><input name="check[]" type="checkbox" class="checkbox" value="Head">&nbsp;Head</label></div></li>
     </ul>
     <button type="submit" class="btn alert-continue-btn ">Continue</button>
 </div>

的JavaScript

$(document).on('change','.select-all',function(){
    if($(this).is(':checked')) {
        $('[name="check[]"]').each(function(){
            $(this).prop('checked', true);
        });
    } else {
        $('[name="check[]"]').each(function(){
            $(this).prop('checked', false);
        });
    }
});

说明

我们为类select-all添加了一个新复选框，并收听该复选框的change事件。如果选中，JavaScript将搜索名称为checkbox[]的所有复选框，并使用prop ('checked', true)进行检查。如果未选中，则会使用prop('checked', false)取消选中复选框。