necesito hacer algo así:
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!
necesito hacer algo así:
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!
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>
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>
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>