Tengo el siguiente código:
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>
Como podéis ver en el script cuando hago click
en un input
este ejecuta la función toggleInputs
que en función de si es un checkbox
o un radio
hace que los labels
aparenten estar presionados o no presionados con la clase "palomeado".
Hasta aquí todo bien, el problema es que esta función solo se ejecuta al hacer click
en los inputs
y por lo tanto al si al cargar la pagina ya hay alguno de ellos marcado a estos no se les añade la clase "palomeado" y por lo tanto no aparentan presionados.
He probado muchas cosas con eventos ready
, sin ellos y con bucles for
para recorrer todos elementos pero siempre tengo problemas con jQuery porque cada vez que hago una selección y el target de esa selección son varios "objetos" este me crea un objeto de esos {}
(perdón por mi falta de vocabulario) y se que puedo acceder a ellos con []
como si fuese un Array
pero cuando quiero acceder a su padre o quitarle o añadirle una clase (ver código comentado) no lo considera como un objeto y me da un error parecido a esto:
TypeErro: objs.parent() is not a function" o "obj.attr() is not a function.
Y tampoco me puedo referir a el como $(this)
. Que se me está escapando? Como puedo solucionarlo? Pero sobretodo me interesa entenderlo.