[英]How to create checkbox inside the form group selection HTML Javascript?
Currently, I have 200+ countries list in my database.目前,我的数据库中有 200 多个国家/地区列表。 I want to create a checkbox for the countries selection.我想为国家选择创建一个复选框。 Even I already put the html type as a checkbox, the checkbox still doesn't exist in my selection form.即使我已经将 html 类型作为复选框,该复选框仍然不存在于我的选择表单中。 How to create checkbox actually?实际上如何创建复选框?
HTML : HTML :
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label>Country</label>
<select class="form-control" name="country_id[]" multiple size="10" style="height: 100%;">
@foreach ($countries as $item)
<option value="{{$item->id}}" selected>{{$item->name}}</option>
@endforeach
</select>
</div>
</div>
</div>
You cannot place checkbox inside select element but you can get the same functionality by using HTML, CSS and JavaScript.您不能在 select 元素中放置复选框,但您可以通过使用 HTML、CSS 和 JavaScript 获得相同的功能。
var expanded = false; function showCheckboxes() { var checkboxes = document.getElementById("checkboxes"); if (!expanded) { checkboxes.style.display = "block"; expanded = true; } else { checkboxes.style.display = "none"; expanded = false; } }
.multiselect { width: 200px; } .selectBox { position: relative; } .selectBox select { width: 100%; font-weight: bold; } .overSelect { position: absolute; left: 0; right: 0; top: 0; bottom: 0; } #checkboxes { display: none; border: 1px #dadada solid; } #checkboxes label { display: block; } #checkboxes label:hover { background-color: #1e90ff; }
<form> <div class="multiselect"> <div class="selectBox" onclick="showCheckboxes()"> <select> <option>Select an option</option> </select> <div class="overSelect"></div> </div> <div id="checkboxes"> <label for="one"> <input type="checkbox" id="one" />First checkbox</label> <label for="two"> <input type="checkbox" id="two" />Second checkbox</label> <label for="three"> <input type="checkbox" id="three" />Third checkbox</label> </div> </div> </form>
Also you can use Bootstrap Multiselect plugin.您也可以使用Bootstrap Multiselect插件。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.