I have the following code:
function toggleInputs(tipo, este) {
if (tipo == "checkbox") {
if ($(este).prop('checked')) {
$(este).parent().addClass("palomeado");
} else {
$(este).parent().removeClass("palomeado");
}
} else if (tipo == "radio") {
$(este).parents("form").children("label").removeClass("palomeado");
$(este).parent().addClass("palomeado");
}
};
$(document).ready(function() {
/*for (var i = 0; i < $("form input").length; i++) {
objs = $("form").find("input")[i];
console.info($("form input")[i].checked);
if($("form input")[i].checked){
objs.parent().addClass("palomeado");
} else {
objs.parent().removeClass("palomeado");
}
}*/
$("form input").click(function() {
toggleInputs($(this).attr("type"), $(this));
});
});
label {
border: 2px solid black;
padding: 5px 10px;
background: #262626;
margin: 1px 0;
/*Algunas de estas propiedades las use en la fase de prueba, cambiar según necesidades*/
cursor: pointer;
width: 60px;
height: 60px;
color: white;
display: inline-flex;
justify-content: center;
align-items: center;
border-radius: 2px;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
-ms-user-select: none;
user-select: none;
}
form[name=dias] {
font-size: 24px;
}
input[type=radio],
input[type=checkbox] {}
label.palomeado {
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="contenedor">
<form name="dias">
<h1>Dias</h1>
<label>
<input type="checkbox" name="dia" id="" />
1
</label>
<label>
<input type="checkbox" name="dia" id="" checked/>
2
</label>
<label>
<input type="checkbox" name="dia" id="" checked/>
3
</label>
</form>
<br><br><br>
<form name="alojamiento">
<h1>Alojamiento</h1>
<label>
<input type="radio" name="alojamiento" id="" />
<i class="fa fa-times"></i>
</label>
<label>
<input type="radio" name="alojamiento" id="" checked/>
<i class="fa fa-fire"></i>
</label>
<label>
<input type="radio" name="alojamiento" id=""/>
<i class="fa fa-home"></i>
</label>
</form>
<br/><br/><br/>
<form name="comida">
<h1>Comida</h1>
<label>
<input type="radio" name="comida" id="" />
<i class="fa fa-camera"></i>
</label>
<label>
<input type="radio" name="comida" id=""/>
<i class="fa fa-camera"></i>
</label>
<label>
<input type="radio" name="comida" id=""checked/>
<i class="fa fa-camera"></i>
</label>
</form>
</div>
As you can see in the script, when I do click
this , input
it executes the function toggleInputs
that, depending on whether it is a checkbox
or a radio
, makes them appear to labels
be pressed or not pressed with the "palomeado" class.
So far so good, the problem is that this function is only executed when doing click
the inputs
and therefore if when loading the page there is already one of them marked, the "palomeado" class is not added to them and therefore not They seem pressured.
I have tried many things with events ready
, without them and with loops for
to go through all the elements but I always have problems with jQuery because every time I make a selection and the target of that selection is several "objects" it creates one of those objects for me {}
(sorry for my lack of vocabulary) and I know that I can access them with []
as if it were a Array
but when I want to access its parent or remove or add a class to it (see commented code) it does not consider it as an object and gives me an error similar to this:
TypeErro: objs.parent() is not a function" or "obj.attr() is not a function.
And I can't refer to him as either $(this)
. What is escaping me? How can I solve that? But above all I want to understand it.
You only have to execute the function for each one that is pressed with the following iteration looking for the selector
:checked
:Here is the complete example: