HTML Las casillas de verificación en la lista de selección

Estoy tratando de construir una lista de casilla dentro de una lista de selección (como la de los países aquí: link text)HTML Las casillas de verificación en la lista de selección

estoy usando Asp.net MVC por lo que debe ser puro/html & | javascript/JQuery. ¿Es esto factible? ¿O ya hay un prebuild uno que podría descargar la carga?

Gracias

rasgado HTML/CSS:

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

<style type="text/css"> 
body { background-color: #FFFFFF; font-family: Tahoma; font-size: 11px; } 

/* Control Skin */ 
input { font: normal 11px Tahoma; } 
div.ctrl { background-color: window; border: solid 1px ThreeDLightShadow; vertical-align: top; margin: 0; padding: 0; width: 268px; } 
input.Button { background: #2F89BD url('images/btn_default%20gradient.gif') repeat-x; cursor: pointer; 
       height: 24px; color: #FFF; border: solid 1px #2F82BE; padding: 0 10px; width: auto; 
       overflow: visible; } 
input.TextBox { border: solid 1px ThreeDLightShadow; height: 16px; padding-top: 2px; text-indent: 2px; width: 150px; } 

/* For MultiSelectControl */ 
.ms_multiSelector { position: absolute; display:inline ; border: 1px solid ThreeDLightShadow; width: 268px; z-index: 100; } 
.MultiSelectControl_txtInput { width: 240px; border: none 0; margin: 5px 0 0 5px; padding: 0; vertical-align: top; } 
.ms_selectListWrapper { padding: 0; margin: 0; } 
.ms_selectList { background-color: #FFFFFF; overflow: auto; height: 265px; _height: 150px; /* For IE 6 */ } 
.ms_chkSelectAll { padding-left: 3px; } 
.selectList_Wrapper { padding: 0; margin: 0; } 
.multiSelectorCountry { position: relative; clear: both; display: none; border: 1px solid ThreeDLightShadow; width: 275px; } 
.multiSelector { position: absolute; visibility: hidden; border: 1px solid ThreeDLightShadow; width: 275px; } 
.mutliselect_container { padding: 0; margin: 0; border: 0; display: inline; } 
.chkSelectAll { padding-left: 3px; } 
.selectList { background-color: #FFFFFF; overflow: auto; height: 200px; _height: 150px; /* For IE 6 */ } 
.chklstSelect INPUT { float: left; width: 20px; /* To align the chkbox text in FF */ } 
.chklstSelect LABEL { text-align: left; float: right; width: 230px; /* To align the chkbox text in FF */ } 
#imgMultiSelectArrow { width: 20px; height: 20px; margin-left: 300px; padding-left: 300px; } 
.multiselect_close { padding: 4px 0; float: right; width: 65px; background: transparent url(https://careers.microsoft.com/images/close_btn.gif) no-repeat 33px center; } 

</style> 




<title>Untitled Page</title> 
</head> 
<body> 
<div class="ctrl" > 
<input type="text" value="Software Engineering: Development" readonly="readonly" class="MultiSelectControl_txtInput" /> 
<img onmouseover="this.src='https://careers.microsoft.com/Images/mm_dropdown_20x20_hover.gif'" onmouseout="this.src='https://careers.microsoft.com/Images/mm_dropdown_20x20.gif'" src="https://careers.microsoft.com/Images/mm_dropdown_20x20.gif" alt="Show/Hide" style="height:20px;width:20px;border-width:0px;" /> 
</div> 
<div class="ms_multiSelector"> 

    <div id="selectList" class="ms_selectList"> 
     <input type="checkbox" value="allcountry" class="ms_chkSelectAll" /> 
     <span class="ms_chkSelectAll" >Select All</span> 

<div> 
     <input type='checkbox' value='1' /> 
     <label>Business Services & Administration</label> 
     <br /> 
     <input type='checkbox' value='37' /> 
     <label>Customer Service & Support</label> 
     <br /> 
    </div> 
    </div> 

</div> 


</body> 
</html>

Fuente

2009-10-01 Lee Smith

Gracias por su tipo de entrada. He arrancado un poco del html del sitio (arriba). Voy a jugar con él y ver qué pasa. –

Terminé usando este: http://code.google.com/p/dropdown-check-list/ –

Tal vez esto no es una respuesta real, pero de todos modos:

Eso no es un control HTML estándar, se construyó con una serie de entradas de texto y divs, tendrías que hacer MUCHO trabajo para reproducir ese comportamiento, para que funcione (posiblemente con cualquier navegador) ...

No estoy al tanto de ningún preconstruido LERS para MVC, tal vez hay algo para JQuery? De todos modos, si no puedes encontrar uno y tienes que hacerlo manualmente, tal vez deberías elegir otros medios con más componentes estándar (o revertir a flash o Silverlight, que son mucho más convencionales para este tipo de personalizaciones).

Fuente

2009-10-01 09:40:03 Palantir

Este no es un control de formulario HTML estándar, sino que ha sido creado por los desarrolladores.

No conozco ninguna solución de código abierto que reproduzca este comportamiento para usted. Me temo que parece improbable que pueda entregar esto sin más esfuerzo de lo que valdrá.

Fuente

2009-10-01 09:46:44 Evernoob

En HTML, los únicos elementos secundarios válidos del elemento seleccionado son option y optgroup. Recomiendo encarecidamente no crear ningún tipo de control de formulario no estándar, ya que estará derrotando la accesibilidad. Te recomiendo que uses controles de formulario estándar de la manera estándar con elementos de etiqueta solamente. Puede modificar el aspecto y la interactividad de esos controles de formulario al contenido de su corazón utilizando CSS y JavaScript, excepto que no altera el orden de flujo visual ni el orden de tabulación, ya que eso también anula la accesibilidad.

La alternativa accesible al formulario de Microsoft es utilizar una lista de selección estándar con el atributo "múltiple" para que se puedan seleccionar múltiples opciones de una sola lista. Aquí está un ejemplo:

<select id="myselectlist" name="myselectlist" multiple="multiple"> 
    <option value="option 1">option 1</option> 
</select>

Usted podría utilizar CSS para falsificar la aparición de casillas de verificación con la aparición de una casilla de verificación marcada como un gráfico de fondo que aparece de pseudo clase de la opción de "activo". Sin embargo, no iría mucho más allá de eso.

Fuente

2009-10-01 10:04:23

Me gusta esta respuesta, especialmente si quieres una mejor oportunidad de trabajar en teléfonos, tabletas y otros dispositivos. Cualquier cosa hecha "desde cero" probablemente tendrá una barra de desplazamiento interna, como un div con desbordamiento: automático, que la mayoría de los teléfonos no admiten (sin embargo, sí admiten controles de lista/combo estándar). Quédate con el estándar cuando puedas. – eselk

Usted podría intentar simplemente dejarlo como es más o menos, excepto añadir

.ms_selectList{ display: none; }

Añadir lo anterior a lo que ya tiene para ms_selectList

Luego, en jQuery tener una función de clic de algún tipo que hará el reloj de visualización ms_selectList esencialmente hace que parezca un cuadro de selección cuando en realidad es una etiqueta div completamente posicionada con un conjunto de casillas de verificación dentro.

Y el jQuery debería ser algo como esto,

$(document).ready(function(){ 

    $('.ctrl').click(function(){ 
     $('#selectList').toggle(); 
    }); 

})

Fuente

2009-10-01 21:15:40

Terminé usando este: http://code.google.com/p/dropdown-check-list/ –

Una solución CSS cross-browser que conforman CSS nivel 2 estándar:

<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <title>select-multiple</title> 
    <style> 
     /* option:checked:before { content: "✓" } */ 
     option:before { content: "☐ " } 
     option:checked:before { content: "☑ " } 
    </style> 
</head> 
<body> 
<h1>select-multiple</h1> 
<select multiple="" size="5" style="width: 200px;"> 
    <option value="0">Banana</option> 
    <option value="1">Cherry</option> 
    <option value="2">Lemon</option> 
    <option value="3">Banana</option> 
    <option value="4">Cherry</option> 
    <option value="5">Lemon</option> 
    <option value="6">Banana</option> 
</select> 
</body> 
</html>

Fiddle

Fuente

2013-03-06 12:05:35 gavenkoa

Buena implementación :) –

¡Esto es hermoso! –

lamentablemente no funciona con msie9 – garyrgilbert

he intentado un montón del complemento js para casillas de verificación en la lista de selección y el mejor hasta el momento 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

Fuente

2014-08-20 21:45:16 pmrotule

HTML Las casillas de verificación en la lista de selección

Respuesta

Cuestiones relacionadas