Cómo usar Checkbox dentro de Seleccionar opción

94

El cliente me ha dado un diseño que tiene un menú Seleccionar opción que contiene una casilla de verificación junto con el nombre del elemento como elementos individuales en la lista. ¿Es posible de todos modos agregar una casilla de verificación dentro de un menú Seleccionar opción?

NB: El desarrollador necesita agregar su propia identificación para que el menú sea efectivo, solo necesito el código HTML CSS si es posible.

javascript html css html-select Héroe Tra
fuente
5
"Solo necesito el código HTML CSS si es posible de todos modos" ... sí, es posible ... solo tendrá que codificarlo usted mismo o
googlearlo
5
@fmodos ¿Posible? Por favor, envíenos una demostración y OP - mire esto ... No es posible solo con CSS y HTML
Mr. Alien
Por favor, lea esta publicación 1stwebdesigns.com/blog/development/…
kuldeep raj
@ Mr.Alien Extraño entendido ... pensé que estaba pidiendo un componente que "podría" ser HTML CSS y no "tenía" que ser solo "HTML CSS" ... mi mal: /
fmodos

Respuestas:

188

No puede colocar la casilla de verificación dentro del elemento de selección, pero puede obtener la misma funcionalidad utilizando HTML, CSS y JavaScript. Aquí hay una posible solución de trabajo. La explicación sigue.

ingrese la descripción de la imagen aquí

Código:

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>
Expandir fragmento

Explicación:

Al principio creamos un elemento de selección que muestra el texto "Seleccionar una opción" y un elemento vacío que cubre (superpone) el elemento de selección ( <div class="overSelect">). No queremos que el usuario haga clic en el elemento seleccionado; mostraría opciones vacías. Para superponer el elemento con otro elemento usamos la propiedad de posición CSS con valor relativo | absoluto.

Para agregar la funcionalidad, especificamos una función de JavaScript que se llama cuando el usuario hace clic en el div que contiene nuestro elemento de selección ( <div class="selectBox" onclick="showCheckboxes()">).

También creamos div que contiene nuestras casillas de verificación y le aplicamos estilo usando CSS. La función de JavaScript mencionada anteriormente simplemente cambia el <div id="checkboxes">valor de la propiedad de visualización de CSS de "ninguno" a "bloque" y viceversa.

La solución se probó en los siguientes navegadores: Internet Explorer 10, Firefox 34, Chrome 39. El navegador debe tener habilitado JavaScript.

Más información:

Posicionamiento CSS

Cómo superponer un div sobre otro div

http://www.w3schools.com/css/css_positioning.asp

Propiedad de visualización CSS

http://www.w3schools.com/cssref/pr_class_display.asp

vitfo
fuente
1
Para su información: esta solución requerirá más esfuerzo si es necesario modificar más de una lista de selección. Sugiero buscar algún complemento mantenido activamente.
¿Cómo obtener el valor de las casillas de verificación seleccionadas? Muy buena respuesta, pero sería muy útil si proporciona plnkr o algo así.
Pardeep Jain
7
también para seleccionar el cuadro no desaparece cuando el usuario selecciona cualquier opción
Pardeep Jain
1
Esta respuesta es genial y funcionó para mí. Sin embargo, hay una mejora que hice. En lugar del overselectdiv que podría causar algunos problemas en una interfaz compleja que utilicé <option selected hidden>Select an option</option>. Puede que no sea el mejor uso de, hiddenpero funciona.
Syknapse
2
pero, ¿cómo ocultar el menú desplegable cuando hacemos clic fuera?
saurabh kumar
57

El mejor complemento hasta ahora es Bootstrap Multiselect

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>jQuery Multi Select Dropdown with Checkboxes</title>

<link rel="stylesheet" href="css/bootstrap-3.1.1.min.css" type="text/css" />
<link rel="stylesheet" href="css/bootstrap-multiselect.css" type="text/css" />

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript" src="js/bootstrap-3.1.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap-multiselect.js"></script>

</head>

<body>

<form id="form1">

<div style="padding:20px">

<select id="chkveg" multiple="multiple">

    <option value="cheese">Cheese</option>
    <option value="tomatoes">Tomatoes</option>
    <option value="mozarella">Mozzarella</option>
    <option value="mushrooms">Mushrooms</option>
    <option value="pepperoni">Pepperoni</option>
    <option value="onions">Onions</option>

</select>

<br /><br />

<input type="button" id="btnget" value="Get Selected Values" />

<script type="text/javascript">

$(function() {

    $('#chkveg').multiselect({

        includeSelectAllOption: true
    });

    $('#btnget').click(function(){

        alert($('#chkveg').val());
    });
});

</script>

</div>

</form>

</body>
</html>

Aquí está la DEMO

$(function() {

  $('#chkveg').multiselect({
    includeSelectAllOption: true
  });

  $('#btnget').click(function() {
    alert($('#chkveg').val());
  });
});
.multiselect-container>li>a>label {
  padding: 4px 20px 3px 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://davidstutz.de/bootstrap-multiselect/dist/js/bootstrap-multiselect.js"></script>
<link href="https://davidstutz.de/bootstrap-multiselect/docs/css/bootstrap-3.3.2.min.css" rel="stylesheet"/>
<link href="https://davidstutz.de/bootstrap-multiselect/dist/css/bootstrap-multiselect.css" rel="stylesheet"/>
<script src="https://davidstutz.de/bootstrap-multiselect/docs/js/bootstrap-3.3.2.min.js"></script>

<form id="form1">
  <div style="padding:20px">

    <select id="chkveg" multiple="multiple">
      <option value="cheese">Cheese</option>
      <option value="tomatoes">Tomatoes</option>
      <option value="mozarella">Mozzarella</option>
      <option value="mushrooms">Mushrooms</option>
      <option value="pepperoni">Pepperoni</option>
      <option value="onions">Onions</option>
    </select>
    
    <br /><br />

    <input type="button" id="btnget" value="Get Selected Values" />
  </div>
</form>
Expandir fragmento

pmrotule
fuente
1
No es necesario que utilice esta gran cantidad de bibliotecas para su solución. Puede usar la opción de selección múltiple HTML normal. ¡Gracias!
Power Star
3
Sé que puedo usar la opción de selección múltiple HTML, pero la encontré fea y no fácil de usar.
pmrotule
4
Me gusta el comportamiento de este complemento, pero quiero usarlo sin bootstrap ... ¿algo similar?
singpolyma
este complemento tiene tantos errores ... tienen 150 problemas abiertos y el mantenedor dijo que no tiene tiempo. así que después de algunos problemas
cambié
1
@Erbureth Las rutas externas de script / hoja de estilo estaban desactualizadas en la demostración (enlaces muertos). Actualicé las URL para solucionarlo.
pmrotule
18

Para un enfoque de CSS puro , puede utilizar el :checkedselector combinado con el ::beforeselector para incluir contenido condicional.

Simplemente agregue la clase select-checkboxa su selectelemento e incluya el siguiente CSS:

.select-checkbox option::before {
  content: "\2610";
  width: 1.3em;
  text-align: center;
  display: inline-block;
}
.select-checkbox option:checked::before {
  content: "\2611";
}

Puede usar caracteres Unicode antiguos y sencillos (con una codificación hexadecimal de escape ) como estos:

O si quieres condimentar las cosas, puedes usar estos glifos FontAwesome

Captura de pantalla

Demostración en jsFiddle & Stack Snippets

Mostrar fragmento de código

Nota : sin embargo, tenga cuidado con los problemas de compatibilidad con IE

KyleMit
fuente
1
Es un problema cuando el multipleatributo hace que <select>parezca un cuadro en lugar de un menú desplegable ...
vsync
@vsync, ¿puede explicarnos qué problema tiene, tal vez incluso bifurcar el violín e incluir una captura de pantalla? El objetivo aquí es aplicarlo a un <select multiple>elemento, por lo que debería ser el caso de uso previsto. Los selectores de CSS deben ser específicos para aplicar esa clase, por lo que decide usarlos en elementos individuales aplicando la .select-checkboxclase
KyleMit
1
Recomiendo encarecidamente esta elegante solución si está buscando un enfoque CSS puro.
Anish Sana
@KyleMit ¡Buena solución! pero el problema es que si quiero seleccionar varios elementos, entonces tengo que usar el botón Ctrl como el elemento de selección simple.
Lalit Rajput
@LalitRajput, seguro, que el diseño de interacción predeterminado para todos los controles de selección múltiple en todos los navegadores. Estoy de acuerdo en que es un poco inestable o poco intuitivo. Siempre puede encontrar formas de anular ese comportamiento predeterminado si lo desea. ¿Cómo evitar la necesidad de presionar Ctrl y hacer clic en un cuadro de selección múltiple usando Javascript? - ver este violín actualizado
KyleMit
14

Pruebe la selección múltiple , especialmente los elementos múltiples . Parece ser una solución mucho más limpia y administrada, con toneladas de ejemplos. También puede ver la fuente.

<div>
  <div class="form-group row">
    <label class="col-sm-2">
      Basic Select
    </label>

    <div class="col-sm-10">
      <select multiple="multiple">
        <option value="1">1</option>
        <option value="2">2</option>
      </select>
    </div>
  </div>

  <div class="form-group row">
    <label class="col-sm-2">
      Group Select
    </label>

    <div class="col-sm-10">
      <select multiple="multiple">
        <optgroup label="Group 1">
          <option value="1">1</option>
          <option value="2">2</option>
        </optgroup>
        <optgroup label="Group 2">
          <option value="6">6</option>
          <option value="7">7</option>
        </optgroup>
        <optgroup label="Group 3">
          <option value="11">11</option>
          <option value="12">12</option>
        </optgroup>
      </select>
    </div>
  </div>
</div>

<script>
  $(function() {
    $('select').multipleSelect({
      multiple: true,
      multipleWidth: 60
    })
  })
</script>
Azghanvi
fuente
Si bien este enlace puede responder a la pregunta, es mejor incluir las partes esenciales de la respuesta aquí y proporcionar el enlace como referencia. Las respuestas de solo enlace pueden dejar de ser válidas si cambia la página enlazada. - De la crítica
Justin Lessard
8

Comencé desde la respuesta de @vitfo pero quiero tener <option>dentro en <select>lugar de entradas de casilla de verificación, así que reuní todas las respuestas para hacer esto, ahí está mi código, espero que ayude a alguien.

$(".multiple_select").mousedown(function(e) {
    if (e.target.tagName == "OPTION") 
    {
      return; //don't close dropdown if i select option
    }
    $(this).toggleClass('multiple_select_active'); //close dropdown if click inside <select> box
});
$(".multiple_select").on('blur', function(e) {
    $(this).removeClass('multiple_select_active'); //close dropdown if click outside <select>
});
	
$('.multiple_select option').mousedown(function(e) { //no ctrl to select multiple
    e.preventDefault(); 
    $(this).prop('selected', $(this).prop('selected') ? false : true); //set selected options on click
    $(this).parent().change(); //trigger change event
});

	
	$("#myFilter").on('change', function() {
      var selected = $("#myFilter").val().toString(); //here I get all options and convert to string
      var document_style = document.documentElement.style;
      if(selected !== "")
        document_style.setProperty('--text', "'Selected: "+selected+"'");
      else
        document_style.setProperty('--text', "'Select values'");
	});
:root
{
	--text: "Select values";
}
.multiple_select
{
	height: 18px;
	width: 90%;
	overflow: hidden;
	-webkit-appearance: menulist;
	position: relative;
}
.multiple_select::before
{
	content: var(--text);
	display: block;
  margin-left: 5px;
  margin-bottom: 2px;
}
.multiple_select_active
{
	overflow: visible !important;
}
.multiple_select option
{
	display: none;
    height: 18px;
	background-color: white;
}
.multiple_select_active option
{
	display: block;
}

.multiple_select option::before {
  content: "\2610";
}
.multiple_select option:checked::before {
  content: "\2611";
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="myFilter" class="multiple_select" multiple>
  <option>A</option>
  <option>B</option>
  <option>C</option>
  <option>D</option>
  <option>E</option>
</select>
Expandir fragmento

pavelbere
fuente
6

Versión alternativa de Vanilla JS con un clic fuera para ocultar las casillas de verificación:

let expanded = false;
const multiSelect = document.querySelector('.multiselect');

multiSelect.addEventListener('click', function(e) {
  const checkboxes = document.getElementById("checkboxes");
    if (!expanded) {
    checkboxes.style.display = "block";
    expanded = true;
  } else {
    checkboxes.style.display = "none";
    expanded = false;
  }
  e.stopPropagation();
}, true)

document.addEventListener('click', function(e){
  if (expanded) {
    checkboxes.style.display = "none";
    expanded = false;
  }
}, false)

Estoy usando addEventListener en lugar de onClick para aprovechar las opciones de la fase de captura / burbujeo junto con stopPropagation (). Puede leer más sobre la captura / burbujeo aquí: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

El resto del código coincide con la respuesta original de vitfo (pero no es necesario onclick () en el html). Un par de personas han solicitado esta funcionalidad sin jQuery.

Aquí está el ejemplo de codepen https://codepen.io/davidysoards/pen/QXYYYa?editors=1010

davidysoards
fuente
2

Puede usar esta biblioteca en git para este propósito https://github.com/ehynds/jquery-ui-multiselect-widget

para iniciar la casilla de selección utilice este

    $("#selectBoxId").multiselect().multiselectfilter();

y cuando tenga los datos listos en json (desde ajax o cualquier método), primero analice los datos y luego asígnele la matriz js

    var js_arr = $.parseJSON(/*data from ajax*/);
    $("#selectBoxId").val(js_arr);
    $("#selectBoxId").multiselect("refresh");
Jaya Parwani
fuente
2

Utilice este código para la lista de casillas de verificación en el menú de opciones.

.dropdown-menu input {
   margin-right: 10px;
}   
<div class="btn-group">
    <a href="#" class="btn btn-primary"><i class="fa fa-cogs"></i></a>
    <a href="#" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
      <span class="caret"></span>
    </a>
    <ul class="dropdown-menu" style="padding: 10px" id="myDiv">
        <li><p><input type="checkbox" value="id1" > OA Number</p></li>
        <li><p><input type="checkbox" value="id2" >Customer</p></li>
        <li><p><input type="checkbox" value="id3" > OA Date</p></li>
        <li><p><input type="checkbox" value="id4" >Product Code</p></li>
        <li><p><input type="checkbox" value="id5" >Name</p></li>
        <li><p><input type="checkbox" value="id6" >WI Number</p></li>
        <li><p><input type="checkbox" value="id7" >WI QTY</p></li>
        <li><p><input type="checkbox" value="id8" >Production QTY</p></li>
        <li><p><input type="checkbox" value="id9" >PD Sr.No (from-to)</p></li>
        <li><p><input type="checkbox" value="id10" > Production Date</p></li>
        <button class="btn btn-info" onClick="showTable();">Go</button>
    </ul>
</div>
Expandir fragmento

Rupesh Wankhede
fuente
Para obtener un ejemplo completo de este enfoque básico de construir un dropdown-menucon elementos de casilla de verificación en cada fila, aquí hay una respuesta para poner casillas de verificación en un menú desplegable de Bootstrap
KyleMit
1

Es posible que esté cargando el archivo multiselect.js antes de que la lista de opciones se actualice con la llamada AJAX, por lo que mientras se ejecuta el archivo multiselect.js, hay una lista de opciones vacía para aplicar la funcionalidad de selección múltiple. Entonces, primero actualice la lista de opciones mediante la llamada AJAX y luego inicie la llamada de selección múltiple; obtendrá la lista desplegable con la lista de opciones dinámicas.

Espero que esto te ayude.

Lista desplegable de selección múltiple y js relacionados y archivos CSS

// This function should be called while loading page
var loadParentTaskList = function(){
    $.ajax({
        url: yoururl,
        method: 'POST',
        success: function(data){
            // To add options list coming from AJAX call multiselect
            for (var field in data) {
                $('<option value = "'+ data[field].name +'">' + data[field].name + '</option>').appendTo('#parent_task');
            }
   
            // To initiate the multiselect call 
            $("#parent_task").multiselect({
                includeSelectAllOption: true
            })
        }
    });
}
// Multiselect drop down list with id parent_task
<select id="parent_task" multiple="multiple">
</select>
Expandir fragmento

Yaswini Modupalli
fuente
0

Si desea crear varios menús desplegables de selección en la misma página:

.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;
}

HTML:

 <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>
<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>

Usando Jquery:

 function showCheckboxes(elethis) {
        if($(elethis).next('#checkboxes').is(':hidden')){
            $(elethis).next('#checkboxes').show();
            $('.selectBox').not(elethis).next('#checkboxes').hide();  
        }else{
            $(elethis).next('#checkboxes').hide();
            $('.selectBox').not(elethis).next('#checkboxes').hide();
        }
 }
Ashish
fuente
-2

Solo agregue class create div y agregue class form-control. iam usa JSP, boostrap4. Ignore c: foreach.

<div class="multi-select form-control" style="height:107.292px;">
        <div class="checkbox" id="checkbox-expedientes">
            <c:forEach var="item" items="${postulantes}">
                <label class="form-check-label">
                    <input id="options" class="postulantes" type="checkbox" value="1">Option 1</label>
            </c:forEach>
        </div>
    </div>
Juan Silupú Maza
fuente