¿Es posible crear un menú desplegable de casillas de verificación de selección múltiple como este en Bootstrap, HTML y JavaScript?
Lo he intentado pero no he podido lograrlo. También soy nuevo en JavaScript. Sin embargo, solo estoy explorando el JS y haciendo que funcione, pero esto parece realmente desafiante para mí. No sé cómo implementar el script JS para esto.
Por ejemplo: si el usuario selecciona los países en la casilla de selección múltiple, quiero que muestre el nombre de todos los países en lugar de la opción Elegir.
código:
<div>Country</div> <div class="row" name="country_checkbox" id="id_row"> <div class="dropdown"> <a aria-expanded="false" aria-haspopup="true" role="button" data-toggle="dropdown" class="dropdown-toggle" href="#"> <span id="selected">Choose option</span><span class="caret"></span></a> <ul id="id_country"> <li><label for="id_country_0"><input type="checkbox" name="country" value="US" placeholder="Select Country" id="id_country_0" onclick="filter_type();"> US</label> </li> <li><label for="id_country_1"><input type="checkbox" name="country" value="India" placeholder="Select Country" id="id_country_1" onclick="filter_type();"> India</label> </li> <li><label for="id_country_2"><input type="checkbox" name="country" value="Japan" placeholder="Select Country" id="id_country_2" onclick="filter_type();"> Japan</label> </li> <li><label for="id_country_3"><input type="checkbox" name="country" value="UK" placeholder="Select Country" id="id_country_3" onclick="filter_type();"> UK</label> </li> </ul> </div>js violín aquí: http://jsfiddle.net/shalman44/92drs7ax/3/
Como ya está utilizando Bootstrap, es posible que también desee utilizar jQuery. Hay un complemento llamado bootstrap-select para lograr una selección múltiple como en su ejemplo, donde la sintaxis es la siguiente:
<select class="selectpicker" multiple> <option>Mustard</option> <option>Ketchup</option> <option>Relish</option> </select> $(function () { $('select').selectpicker(); });Es posible que también desee echar un vistazo a esta pregunta .
Acabo de buscar en Google con "bootstrap multiselect" y encontré este codepen
$(document).ready(function() { $('#multiple-checkboxes').multiselect({ includeSelectAllOption: true, }); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css"> <div class=""> <strong>Select Language:</strong> <select id="multiple-checkboxes" multiple="multiple"> <option value="php">PHP</option> <option value="javascript">JavaScript</option> <option value="java">Java</option> <option value="sql">SQL</option> <option value="jquery">Jquery</option> <option value=".net">.Net</option> </select> </div>