Crear un div que actúe como una casilla de verificación html

Quiero activar/desactivar el div al hacer clic (debe actuar como una casilla de verificación html) y hacer cambios visibles usando css. ¿Es esto posible sin Javascript, o tendría que usar Javascript?Crear un div que actúe como una casilla de verificación html

Si ha creado una secuencia de comandos de este tipo, compártala.

Gracias por su ayuda con anticipación.

Fuente

2011-04-02 Php Beginner

No es posible sin JavaScript (a menos que envíe cada clic como un enlace al servidor y use php para modificar el div, lo que espero que no desee hacer). No recomendaría hacer esto a menos que realmente no pueda hacerlo con casillas de verificación porque hará que el sitio no se pueda usar para las personas sin JavaScript habilitado. – Czechnology

En realidad puede * casi * hacer esto colocando una casilla de verificación real sobre otro elemento y dándole 0% de opacidad, y una altura y ancho según sea necesario.Sin embargo, hacer que algo visual suceda en función del estado de la casilla de verificación dependerá del soporte del navegador para la pseudoclase ": comprobada", que creo que sigue siendo limitada. – Pointy

Bueno, tienes que usar javascript y es muy simple. Solo necesitas cambiar el estilo CSS de div en la acción.

<a href='javascript: toggle()'>toggle</a> 
<div id='div1' style='display:none'> 
Don't display me 
</div> 

<script> 
function toggle(){ 
    var div1 = document.getElementById('div1') 
    if (div1.style.display == 'none') { 
     div1.style.display = 'block' 
    } else { 
     div1.style.display = 'none' 
    } 
} 
</script>

Fuente

2011-04-02 12:48:25 heroix

He estado tratando de responder a su pregunta y he creado un pequeño código jQuery (1.5.2). Espero que esto ayude a echar un vistazo y dime ¿es esto lo que estás buscando ?, o si quieres algo más, también puedo hacerlo. En este script al hacer clic en un elemento div con id on_off (también puede seleccionarlo usando var!) Y class for on (on_off_on) y off (on_off_off) y, por cierto, puede seleccionarlos también, solo acceda al enlace jsFiddle para live demo o se puede ver la secuencia de comandos a continuación -

HTML -

<html> 
    <head> 
      <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js" ></script> 
    </head> 
    <body> 
      <div id="on_off" class="on_off_on" >ON</div> 
    </body> 
</html>

CSS -

div.on_off_off 
{ 
background: rgb(150,110,120); 
font-family: segoe ui; 
font-size: 12px; 
font-weight: bold; 
padding: 5px 10px; 
border: 3px solid rgb(180, 140, 150); 
border-radius: 5px; 
-moz-border-radius: 5px; 
-webkit-border-radius: 5px; 
-khtml-border-radius: 5px; 
color: #fff; 
display: inline; 
} 
div.on_off_on 
{ 
background: rgb(110,150,120); 
font-family: segoe ui; 
font-size: 12px; 
font-weight: bold; 
padding: 5px 10px; 
border: 3px solid rgb(140, 180, 150); 
border-radius: 5px; 
-moz-border-radius: 5px; 
-webkit-border-radius: 5px; 
-khtml-border-radius: 5px; 
color: #fff; 
display: inline; 
}

Código jQuery -

$(document.body).ready(function() { 
    $(function() { 

     var main_obj_id = 'on_off'; 
     var on_class = 'on_off_on'; 
     var off_class = 'on_off_off';   

     $('#' + main_obj_id).click(function() { 
       if ($(this).is('.' + on_class)) { 

       $(this).removeClass(on_class); 
       $(this).addClass(off_class); 
       $(this).html('OFF'); 

       } else { 

       $(this).removeClass(off_class); 
       $(this).addClass(on_class); 
       $(this).html('ON');     

       } 
     }); 
    }); 
});

Espero que esto ayude!

Fuente

2011-04-02 14:52:36

Se podría implementar esta sin javascript usando el elemento de etiqueta para envolver el div que desea hacer clic en:

<input name="checkbox1" id="checkbox1" type="checkbox"> 
<label for="checkbox1"> 
    Click me 
</label>

y CSS:

input { 
    display:none; 
} 
:checked + label { 
    border: 1px solid rgba(81, 203, 238, 1); 
    box-shadow: 0 0 5px rgba(81, 203, 238, 1); 
}

ver aquí para ver un ejemplo con un estilo css http://jsfiddle.net/vyP7c/761/

Fuente

2015-01-27 20:26:53

Puede hacer esto muy fácilmente con solo código CSS ocultando las casillas de verificación y diseñando sus etiquetas como:

HTML

<div id="checkboxes"> 
    <input type="checkbox" name="rGroup" value="1" id="r1" checked="checked" /> 
    <label class="whatever" for="r1"></label> 
    <input type="checkbox" name="rGroup" value="2" id="r2" /> 
    <label class="whatever" for="r2"></label> 
    <input type="checkbox" name="rGroup" value="3" id="r3" /> 
    <label class="whatever" for="r3"></label> 
</div>

CSS

.whatever{ 
    background-color: red; 
    display: inline-block; 
    width: 100px; 
    height: 100px; 
} 

#checkboxes input[type=checkbox]{ 
    display: none; 
} 

#checkboxes input[type=checkbox]:checked + .whatever{ 
    background-color: green; 
}

Puede echar un vistazo a este código simple en acción aquí:
JSFiddle

Espero que esto ayude! :)

Fuente

2015-04-01 13:38:58 nicosemp

Esto se ve genial, gracias por hacerlo! ¿Cuál es el papel del código '# checkboxes'? El violín funciona igual sin él. –

Simplemente aumenta la especificidad. Si solo usa 'input [type = checkbox]' en el CSS, aplicará la regla a cualquier casilla de la página. Al usar '# checkboxes' solo lo aplicas a las casillas de verificación que están en un' div' con 'id =" casillas de verificación "'. – nicosemp

Crear un div que actúe como una casilla de verificación html

Respuesta

Cuestiones relacionadas