-1

necesito hacer algo así:

introducir la descripción de la imagen aquí

Donde D L M X J V S, sean botones que al apretarlos queden presionados y luego al presionar el botón Agregar yo sepa cuales fueron presionados, serían parecidos a los checkbox.

Saludos!

7
  • 1
    ¿Has probado algo? Coloca tu código aunque no sea correcto. De esta manera podremos ayudarte con mayor facilidad.
    – GDP
    Commented el 11 sept. 2017 a las 14:14
  • Hola @GDP, no he probado nada aún, estuve buscando si encontraba alguna solución o algo parecido pero nada. Commented el 11 sept. 2017 a las 14:16
  • por que no usas checkboxes? Commented el 11 sept. 2017 a las 14:18
  • Si se puede hacer de esa manera me gusta más, queda mejor visualmente, si no lo haré con checkbox. Commented el 11 sept. 2017 a las 14:20
  • 1
    sabias que puedes cambiar el estilo de los checkbox? jsfiddle.net/4huzr Quizá sea mas apropiado cambiar el estilo que emular la misma funcionalidad con otros controles. Esto es por que en un formulario los otros controles no se enviarían correctamente sin intervención de código Js. En el ejemplo, si pones una letra dentro del <label> queda mas o menos como quieres :P Commented el 11 sept. 2017 a las 14:21

3 respuestas 3

3

Tienes muchas formas de hacerlo. Una sería la de cambiar el estilo de cada elemento "día" al hacer click para activarlo o desactivarlo.

Luego al pulsar el botón agregar no tendrías más que comprobar qué días tienen un estilo determinado.

Aquí tienes un ejemplo utilizando jQuery

$(function(){
  $('ul li').click(function(){
    $(this).toggleClass('active');
  });
  
  $('#btnAgregar').click(function(){
    console.log($('ul li.active').text());
  });
});
ul {
  list-style: none;
}
ul li {
  border: solid 1px black;
  padding: 10px;
  width: 20px;
  margin: 5px;
  cursor: pointer;
  display: inline;
}
ul li.active{
  background-color: black;
  color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="dias">
  <li>D</li>
  <li>L</li>
  <li>M</li>
  <li>X</li>
  <li>J</li>
  <li>V</li>
  <li>S</li>
</ul>
<button id="btnAgregar">Agregar</button>

2

Quizá sea mas apropiado cambiar el estilo que emular la misma funcionalidad con otros controles. Esto es por que en un formulario los otros controles no se enviarían correctamente sin intervención de código Js.

Este es el ejemplo con checkboxes (que puedes encontrar originalmente en esta respuesta):

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

input[type=checkbox]+label {
  background: #999;
  height: 20px;
  width: 20px;
  display: inline-block;
  padding: 5px;
}

input[type=checkbox]:checked+label {
  background: #0080FF;
  height: 20px;
  width: 20px;
  display: inline-block;
  padding: 5px;
}
<form>
  <input type='checkbox' name='thing1' value='valuable' id="thing1" /><label for="thing1">D</label>
  <input type='checkbox' name='thing2' value='valuable' id="thing2" /><label for="thing2">L</label>
  <input type='checkbox' name='thing3' value='valuable' id="thing3" /><label for="thing3">M</label>
  <input type='checkbox' name='thing4' value='valuable' id="thing4" /><label for="thing4">X</label>
  <input type='checkbox' name='thing5' value='valuable' id="thing5" /><label for="thing5">J</label>
  <input type='checkbox' name='thing6' value='valuable' id="thing6" /><label for="thing6">V</label>
  <input type='checkbox' name='thing7' value='valuable' id="thing7" /><label for="thing7">S</label>
  <br><br>
  <button type="submit">Enviar</button>
</form>

0

Juega con jquery y css, de esta manera podras cambiar los estilos de los botones una vez que los clickes.

$(".button").click(function(){
  $(this).css("background-color", "red");
});
$(".button2").click(function(){
  var presionados=new Array();
  $(".button").each(function(){
  if(($(this).css("background-color")=="rgb(255, 0, 0)")&&( $(this).val()!="undefined")){
    presionados.push($(this).val());
  }});
  console.log(presionados);
});
.button {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" class="button" value="D"/>
<input type="button" class="button" value="L"/>
<input type="button" class="button" value="M"/>
<input type="button" class="button" value="X"/>
<input type="button" class="button" value="J"/>
<input type="button" class="button" value="V"/>
<input type="button" class="button" value="S"/>
<br/>
<button class="button2">AGREGAR</button>

2
  • el codigo de colores no parece muy logico para este caso... y que se puedan de-seleccionar quizá estaría bien :P
    – lois6b
    Commented el 11 sept. 2017 a las 15:09
  • @lois6b los colores se los he metido para darle el aspecto de mantenerse presionados como pide. Luego la idea seria trabajarlos bien, inhabilitarlos... etc
    – GDP
    Commented el 11 sept. 2017 a las 15:13

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.