gnguyen's avatar

Checkbox multi-select not working

I'm using the Bootstrap plug-in to do the checkbox multi-select, but for some reason I'm not getting the multi check-boxes.

This is the website I'm using http://davidstutz.de/bootstrap-multiselect/

and this is my code:

<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"/>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>

<!-- Include the plugin's CSS and JS: -->
<script type="text/javascript" src="js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="css/bootstrap-multiselect.css" type="text/css"/>


@section('content')
<div class='container'>
//rest of code

... ...

<div class="form-group">
            <label for='state'>State</label>
            <select name='state' id='state' multiple='multiple'>
                <option value='CA'>California</option>
                <option value='VA'>Virginia</option>
                <option value='CO'>Colorado</option>
                <option value='IA'>Iowa</option>
                <option value='WA'>Washington</option>
            </select>		
        </div>

... ...

<script type='text/javascript'>
    $(document).ready(function() {
        $('#state').multiselect();
    });
<script>

Any ideas as to why it's not doing the checkboxes?

0 likes
7 replies
MichalOravec's avatar

You have to set it as an array state[] in the name attribute.

<select name="state[]" id="state" multiple>
gnguyen's avatar

I changed it, but it still gives me the same result.

MichalOravec's avatar

Add backslash to your src and href attributes as

<link rel="stylesheet" href="/css/bootstrap.min.css">
<script src="/js/jquery.min.js"></script>
<script src="/js/bootstrap.min.js"></script>

<script src="/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="/css/bootstrap-multiselect.css">
gnguyen's avatar

Also did not work, although I'm not sure if I need to use my command line to download some packages beforehand.

gnguyen's avatar

Well, I haven't been able to find a solution. Is there another way to have a checkbox inside a select dropdown menu? Either through jQuery or Bootstrap? I've tried several ones through google and none of them seem to work in my application.

Snapey's avatar

use your browser tools to

a) check that there are no javascript errors in the console

b) check that all your files are loaded correctly (in the network tab)

Also check you are not loading jquery twice, and the version you are using is compatible with the plugin

Please or to participate in this conversation.