0

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.

1
  • Espero que la sencillez de mi ejemplo y el enlace a la documentación sea suficiente para que entiendas como funciona. Si no es así házmelo saber y amplio algo más la respuesta. el 28 abr. 2017 a las 13:25

1 respuesta 1

2

Sólo te queda ejecutar la función por cada uno que esté pulsado con la siguiente iteración buscando el selector :checked:

$("form input:checked").each(function() {
  toggleInputs($(this).attr("type"), $(this));
});

Aquí tienes el ejemplo completo:

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));
  });
  $("form input:checked").each(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>

3
  • Wow! Vaya, no conocía .each(), que interesante, investigaré sobre ello. Problema resuelto, muchísimas gracias! Pero de todas maneras, ¿porque no puedo hacer $("form input")[6].addClass?? Muchas gracias por tu tiempo! el 28 abr. 2017 a las 16:48
  • 1
    $( ... ) devuelve una instancia del objeto jQuery y no una matriz. Aunque podrías usar $( ... ).toArray()[6].addClass en su lugar. el 28 abr. 2017 a las 17:07
  • Investigaré sobre ambos conceptos. Muchisimas gracias! el 29 abr. 2017 a las 17:34

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.