在引导复选框中启用多选择选项

Enable Multi Select option in bootstrap check box?

本文关键字：选择 选项 启用 复选框      更新时间：2023-09-26

我正在创建一个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中提供多个选择选项。

工作jsFiddle示例

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)取消选中复选框。

相关文章：