Selecting multiple buttons in a form using Bootstrap
23,309
See the JavaScript buttons section of the Bootstrap documentation, and look at checkbox
buttons:
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="checkbox" checked> Option 1 (pre-checked)
</label>
<label class="btn btn-primary">
<input type="checkbox"> Option 2
</label>
<label class="btn btn-primary">
<input type="checkbox"> Option 3
</label>
</div>
Author by
Mobaz
Updated on July 09, 2022Comments
-
Mobaz almost 2 years
I have a set of buttons that form a selection as part of my form.
The code is below:
<div class="form-group"> <div> <h4>Extras</h4> </div> <div class="radio-inline"> <input type="button" class="btn btn-default inline" name="extra" value="Garden" > <input type="button" class="btn btn-default inline" name="extra" value="Balcony"> <input type="button" class="btn btn-default inline" name="extra" value="Parking"> </div> </div>
However, I want to make the options not mutually exclusive i.e. you can select both 'Garden' and 'Balcony' - and I'd like to retain the button styling.
Can anyone help with this?
EDIT: Ok - got something weird going on now - Got this code.
<div class="btn-group" data-toggle="buttons"> <label class="btn btn-default"> <input type="checkbox" name="garden" checked=""> Garden </label> <label class="btn btn-default"> <input type="checkbox"> Balcony </label> <label class="btn btn-default"> <input type="checkbox"> Parking </label> </div>
When I use bootply the multiple selection user feature works great - when I add it to my page - its not working - does anyone have any idea why it may be? Below is the whole page
<div class="container"> <div class="row"> <div class="col-md-12"><h2>This is the header</h2></div> </div> <div class="row"> <div class="col-md-8"> <h2>Hello world!</h2> <form d="multiform" role="form" action="listing.php" method="post" enctype="multipart/form-data"> <div><h4>Listing Type</h4></div> <div class="radio"> <input type="button" class="btn btn-default" value="For Sale" > <input type="button" class="btn btn-default inline" name="list_type" value="For Rent"> <input type="button" class="btn btn-default inline" name="list_type" value="Flat Share"> </div> <div class="form-group"> <label for="text">Title</label> <input class= "form-control" type="text" name="text"> </div> <div class="form-group"> <label for="desc">Description</label> <textarea class= "form-control" name="desc" rows="5"></textarea> </div> <!nested columns in the first one!> <div class="col-md-6"> <div class="form-group"> <label for="total_beds">Total Bedrooms</label> <select class="form-control" name="total_beds"> <option>Total Bedrooms</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> </div> <div class="form-group"> <label for="pets">Pets</label> <select class="form-control" name="pets"> <option>Pets OK?</option> <option>Yes</option> <option>No</option> </select> </div> <p>This is another p</p> </div> <div class="col-md-6"> <div class="form-group"> <label for="postcode">Postcode (for Maps)</label> <input type="text" class="form-control" name="postcode" placeholder="Post Code"> </div> </div> <div class="col-md-12"> <div class="form-group"> <div><h4>Extras</h4> <div class="checkbox"> <input type="button" class="btn btn-default inline" name="extra" value="Garden" > <input type="button" class="btn btn-default inline" name="extra" value="Balcony"> <input type="button" class="btn btn-default inline" name="extra" value="Parking"> </div> </div> <div class="btn-group" data-toggle="buttons"> <label class="btn btn-default"> <input type="checkbox" name="garden" checked=""> Garden </label> <label class="btn btn-default"> <input type="checkbox"> Balcony </label> <label class="btn btn-default"> <input type="checkbox"> Parking </label> </div> </div> </form> </div> <div class="col-md-4">Hello world Right! </div> </div><! closes container!>