Enable Multi Select option in bootstrap check box?

Question

I am creating a web application in which bootstrap is used for design. And I am creating a check box using bootstrap.check-box.js and bootstrap.check-box.css

Using the code 

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

my html code is

 <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>

This is the jquery code for popping up that checkbox div..

$("#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;
    });

Now , What I need to know is that this check-box is single-select only,I couldn't select multiple options in that check box.

So,Please help me friends by telling how to provide multiple select option in check-boxes .. Thanks in advance...

Answer 1

Working jsFiddle example

Code

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);
        });
    }
});

Explanation

We add a new checkbox with the class select-all and listen to the change event of that checkbox. If it is checked, JavaScript will search for all the checkboxes with the name checkbox[] and make it checked using prop ('checked', true) . If it is unchecked it will uncheck the checkboxes using prop('checked', false) .