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 in a input this executes the function toggleInputs that depending on whether it is a checkbox or a radio makes the labels appear to be pressed or not pressed with the class "palomeado".
So far so good, the problem is that this function is only executed by doing click in the inputs and therefore if the page is already loaded there is one of them marked to these is not added the class "palomeado" and therefore do not appear pressured.
I've tried many things with events ready , without them and with loops for to go through all elements but I always have problems with jQuery because every time I make a selection and the target of that selection are several "objects" this I create an object of those {} (sorry for my lack of vocabulary) and I can access them with [] as if it were a Array but when I want to access their parent or remove or add a class (see commented code) 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 not refer to it as $(this) . What is slipping away? How can I solve it? But above all I am interested in understanding it.