I need to do something like this:
Where D L M X J V S, are buttons that when pressed are pressed and then when pressing the Add button I know which ones were pressed, they would be similar to the checkboxes.
Greetings!
I need to do something like this:
Where D L M X J V S, are buttons that when pressed are pressed and then when pressing the Add button I know which ones were pressed, they would be similar to the checkboxes.
Greetings!
You have many ways to do it. One would be to change the style of each "day" element by clicking to activate or deactivate it.
Then when you click on the add button, you only have to check which days have a certain style.
Here is an example using 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>It may be more appropriate to change the style than to emulate the same functionality with other controls. This is because in a form the other controls would not be sent correctly without the intervention of Js code.
This is the example with checkboxes (which you can find originally in this answer ):
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>Play with jquery and css, this way you can change the styles of the buttons once you click them.
$(".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>