Nueva pregunta

Pregunta:

 
  2  
 
 
Walter Sánchez Karma: 6600 Argentina
 
 Fecha: 07-06-2017 20:09:40 (En Español)

¿Cómo hacer que al clickear un label se tilde un checkbox en Bootstrap 3?[Resuelta]

En Bootstrap 3 cómo hacer que al clickear en un label se tilde su checkbox como se ve en la siguiente imagen.


Si clickeo en el checkbox se tilda pero si clickeo en el label "Opcion" no se tilda el checkbox.
Está hecho con CSS y tiene que mantener los colores como están, es decir el checkbox con primary y el label en default.

He probado varias formas pero sin resultado.

El codigo:
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Bootstrap 3</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
    <!-- Bootstrap 3.3.7 CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <!--Jquery 3.2.1 -->
    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
    <!-- Bootstrap JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    <style>
        .btn span.glyphicon {
            opacity: 0;
        }
        .btn.active span.glyphicon {
            opacity: 1;
        }
    </style>
</head>
<body>
<div class="container">
    <h1>Checkbox</h1>
    <div class="btn-group" data-toggle="buttons">
                <span  class="btn btn-primary ">
                    <input type="checkbox" name="FechasTodas" id="Mi_chekbox" autocomplete="off"  value="valor">
                    <span class="glyphicon glyphicon-ok"></span>
                </span>
        <label for="Mi_chekbox" class="btn btn-default active">
            Opcion
        </label>
    </div>
</div>
</body>
</html>

Codigo Online
Muchas Gracias

Saludos
 Etiquetas: Bootstrap - CSS - CSS3 - Formulario - HTML - HTML5 - Pregunta Votos: 2 - Respuestas: 6 - Vistas: 15 Compartir en: Google Facebook Twitter LinkedIn Link
 

Respuestas:

  •  
      1  
     
     
    Andy Martinez Karma: 315 Colombia
     
    Fecha: 08-06-2017 19:21:08 Has intentado con js
    puedes atarle un evento click que adición un atributo checked="cheched" para que lo marque y sino pues que le renueva este valor       Votos: 1 - Link respuesta
     
  •  
      0  
     
     
    Walter Sánchez Karma: 6600 Argentina
     
    Fecha: 09-06-2017 02:09:15 Andy gracias por responder, si lo puedo hacer con js pero la idea es hacerlo con CSS   Votos: 0 - Link respuesta
     
  •  
      0  
     
     
    Andy Martinez Karma: 315 Colombia
     
    Fecha: 09-06-2017 05:55:05 has probado con 
    .checkbox input[type="checkbox"]:checked + label:before{
/*code*/
content:"algo";
}
.checkbox input[type="checkbox"]:checked + label {
/*code*/
content:"";
}
      Votos: 0 - Link respuesta
     
  •  
      1  
     
     
    Fernando Mosquera Karma: 10241 Argentina
     
    Fecha: 10-06-2017 18:22:59 Hola Walter, estuve viendo tu caso, entiendo que lo que estas necesitando es puntualmente para Bootstrap 3, pero tal vez este comentario te pueda aportar algo de luz.

    Con puro HTML tenes dos formas para lograr que al hacer click sobre la etiqueta label se pase a checked el control checkbox, una es por medio del atributo for de la etiqueta label, donde especificas el id correspondiente al control checkbox (método que por lo que veo no te ha funcionado con Bootstrap), y el segundo método por medio de la etiqueta label como wrapper del control checkbox (este método si funcióna con Bootstrap, pero estéticamente tendrás que cambiar los estilos). Veamos ambos casos en código:

    1) Por medio del atributo for de la etiqueta label conteniendo el id del control checkbox
    <label for="chekbox1">Opción 1</label>
<input type="checkbox" id="chekbox1" autocomplete="off"  value="valor">


    2) Por medio de la etiqueta label como wrapper del control checkbox
    <label>Opción 2 <input type="checkbox" autocomplete="off"  value="valor"></label>


    Espero que mi respuesta te sea de ayuda.

    Saludos y buen código.       Votos: 1 - Link respuesta
     
  •  
      2  
     
     
    Richard Martinez Karma: 42 Venezuela
     
    Fecha: 11-06-2017 04:25:34 Estimado, revisa este link Funky Radio/Checkbox Buttons V2.0   Votos: 2 - Link respuesta
     
  •  
      3  
     
     
    Walter Sánchez Karma: 6600 Argentina
     
    Fecha: 13-06-2017 18:29:47 Hola a todos
    Antes que nada muchas gracias a todos por responder.
    Fernando buena explicación pero no lo he podido implementar en bootstrap.

    Hoy he encontrado una solución al respecto el cual comparto para quienes les interese y con ello doy por cerrado este tema.

    <!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Bootstrap 3</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
    <!-- Bootstrap 3.3.7 CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <style>

      /* - CSS checkbox */
        .form-group input[type="checkbox"] {
            display: none;
        }

        .form-group input[type="checkbox"] + .btn-group > label span {
            width: 20px;
        }

        .form-group input[type="checkbox"] + .btn-group > label span:first-child {
            display: none;
        }
        .form-group input[type="checkbox"] + .btn-group > label span:last-child {
            display: inline-block;
        }

        .form-group input[type="checkbox"]:checked + .btn-group > label span:first-child {
            display: inline-block;
        }
        .form-group input[type="checkbox"]:checked + .btn-group > label span:last-child {
            display: none;
        }
      /* CSS checkbox - */
    </style>
</head>
<body>
<div class="container">
    <div class="[ row ]">
        <h2> Bootstrap Checkboxes</h2>
       <p class="text-primary">Con checked="checked" queda seleccionado </p>
    </div>
    <div class="[ col-xs-12 col-sm-6 ]">
        <h3>Standard Checkboxes</h3><hr />
        <div class="[ form-group ]">
            <input type="checkbox"  name="fancy-checkbox-default" id="fancy-checkbox-default" autocomplete="off" />
            <div class="[ btn-group ]">
                <label for="fancy-checkbox-default" class="[ btn btn-default ]">
                    <span class="[ glyphicon glyphicon-ok ]"></span>
                    <span> </span>
                </label>
                <label for="fancy-checkbox-default" class="[ btn btn-default active ]">
                    Default Checkbox
                </label>
            </div>
        </div>


        <div class="[ form-group ]">
            <input type="checkbox" name="fancy-checkbox-primary" id="fancy-checkbox-primary" autocomplete="off" />
            <div class="[ btn-group ]">
                <label for="fancy-checkbox-primary" class="[ btn btn-primary ]">
                    <span class="[ glyphicon glyphicon-ok ]"></span>
                    <span> </span>
                </label>
                <label for="fancy-checkbox-primary" class="[ btn btn-default active ]">
                    Primary Checkbox
                </label>
            </div>
        </div>
        <div class="[ form-group ]">
            <input type="checkbox" name="fancy-checkbox-success" id="fancy-checkbox-success" autocomplete="off" />
            <div class="[ btn-group ]">
                <label for="fancy-checkbox-success" class="[ btn btn-success ]">
                    <span class="[ glyphicon glyphicon-ok ]"></span>
                    <span> </span>
                </label>
                <label for="fancy-checkbox-success" class="[ btn btn-default active ]">
                    Success Checkbox
                </label>
            </div>
        </div>
        <div class="[ form-group ]">
            <input type="checkbox" name="fancy-checkbox-info" id="fancy-checkbox-info" autocomplete="off" />
            <div class="[ btn-group ]">
                <label for="fancy-checkbox-info" class="[ btn btn-info ]">
                    <span class="[ glyphicon glyphicon-ok ]"></span>
                    <span> </span>
                </label>
                <label for="fancy-checkbox-info" class="[ btn btn-default active ]">
                    Info Checkbox
                </label>
            </div>
        </div>
        <div class="[ form-group ]">
            <input type="checkbox" name="fancy-checkbox-warning" id="fancy-checkbox-warning" autocomplete="off" />
            <div class="[ btn-group ]">
                <label for="fancy-checkbox-warning" class="[ btn btn-warning ]">
                    <span class="[ glyphicon glyphicon-ok ]"></span>
                    <span> </span>
                </label>
                <label for="fancy-checkbox-warning" class="[ btn btn-default active ]">
                    Warning Checkbox
                </label>
            </div>
        </div>
        <div class="[ form-group ]">
            <input type="checkbox" name="fancy-checkbox-danger" id="fancy-checkbox-danger" autocomplete="off" />
            <div class="[ btn-group ]">
                <label for="fancy-checkbox-danger" class="[ btn btn-danger ]">
                    <span class="[ glyphicon glyphicon-ok ]"></span>
                    <span> </span>
                </label>
                <label for="fancy-checkbox-danger" class="[ btn btn-default active ]">
                    Danger Checkbox
                </label>
            </div>
        </div>
    </div>

    <div class="[ col-xs-12 col-sm-6 ]">
        <h3>Custom Icons Checkboxes</h3><hr />
        <div class="[ form-group ]">
            <input type="checkbox" name="fancy-checkbox-default-custom-icons" id="fancy-checkbox-default-custom-icons" autocomplete="off" />
            <div class="[ btn-group ]">
                <label for="fancy-checkbox-default-custom-icons" class="[ btn btn-default ]">
                    <span class="[ glyphicon glyphicon-plus ]"></span>
                    <span class="[ glyphicon glyphicon-minus ]"></span>
                </label>
                <label for="fancy-checkbox-default-custom-icons" class="[ btn btn-default active ]">
                    Default Checkbox
                </label>
            </div>
        </div>
        <div class="[ form-group ]">
            <input type="checkbox" name="fancy-checkbox-primary-custom-icons" id="fancy-checkbox-primary-custom-icons" autocomplete="off" />
            <div class="[ btn-group ]">
                <label for="fancy-checkbox-primary-custom-icons" class="[ btn btn-primary ]">
                    <span class="[ glyphicon glyphicon-plus ]"></span>
                    <span class="[ glyphicon glyphicon-minus ]"></span>
                </label>
                <label for="fancy-checkbox-primary-custom-icons" class="[ btn btn-default active ]">
                    Primary Checkbox
                </label>
            </div>
        </div>
        <div class="[ form-group ]">
            <input type="checkbox" name="fancy-checkbox-success-custom-icons" id="fancy-checkbox-success-custom-icons" autocomplete="off" />
            <div class="[ btn-group ]">
                <label for="fancy-checkbox-success-custom-icons" class="[ btn btn-success ]">
                    <span class="[ glyphicon glyphicon-plus ]"></span>
                    <span class="[ glyphicon glyphicon-minus ]"></span>
                </label>
                <label for="fancy-checkbox-success-custom-icons" class="[ btn btn-default active ]">
                    Success Checkbox
                </label>
            </div>
        </div>
        <div class="[ form-group ]">
            <input type="checkbox" name="fancy-checkbox-info-custom-icons" id="fancy-checkbox-info-custom-icons" autocomplete="off" />
            <div class="[ btn-group ]">
                <label for="fancy-checkbox-info-custom-icons" class="[ btn btn-info ]">
                    <span class="[ glyphicon glyphicon-plus ]"></span>
                    <span class="[ glyphicon glyphicon-minus ]"></span>
                </label>
                <label for="fancy-checkbox-info-custom-icons" class="[ btn btn-default active ]">
                    Info Checkbox
                </label>
            </div>
        </div>
        <div class="[ form-group ]">
            <input type="checkbox" name="fancy-checkbox-warning-custom-icons" id="fancy-checkbox-warning-custom-icons" autocomplete="off" />
            <div class="[ btn-group ]">
                <label for="fancy-checkbox-warning-custom-icons" class="[ btn btn-warning ]">
                    <span class="[ glyphicon glyphicon-plus ]"></span>
                    <span class="[ glyphicon glyphicon-minus ]"></span>
                </label>
                <label for="fancy-checkbox-warning-custom-icons" class="[ btn btn-default active ]">
                    Warning Checkbox
                </label>
            </div>
        </div>
        <div class="[ form-group ]">
            <input type="checkbox" name="fancy-checkbox-danger-custom-icons" id="fancy-checkbox-danger-custom-icons" autocomplete="off" />
            <div class="[ btn-group ]">
                <label for="fancy-checkbox-danger-custom-icons" class="[ btn btn-danger ]">
                    <span class="[ glyphicon glyphicon-plus ]"></span>
                    <span class="[ glyphicon glyphicon-minus ]"></span>
                </label>
                <label for="fancy-checkbox-danger-custom-icons" class="[ btn btn-default active ]">
                    Danger Checkbox
                </label>
            </div>
        </div>
    </div>

    <div class="container">
        <h3>Mi checkbox - checked </h3>
        <div class="[ form-group ]">
            <input type="checkbox" name="fancy-checkbox-primary-x" id="fancy-checkbox-primary-x" autocomplete="off" checked="checked" />
            <div class="[ btn-group ]">
                <label for="fancy-checkbox-primary-x" class="[ btn btn-primary ]">
                    <span class="[ glyphicon glyphicon-ok ]"></span>
                    <span> </span>
                </label>
                <label for="fancy-checkbox-primary-x" class="[ btn btn-default active ]">
                    Primary Mi Checkbox
                </label>
            </div>
        </div>
    </div>

</div>
</body>
</html>


    Ejemplo online

    Muchas gracias
    Que tenga un buen dia
    Saludos       Votos: 3 - Link respuesta
     
Para participar activamente de la comunidad primero debes autenticarte, ingresa al sistema.Iniciar Sesión
 
frjcbbae garagebible.com