1

Lo pondré simple, si me funciona la primer ocasión, inicia desmarcado y si doy click al div este es marcado, lo hago de nuevo, se desmarca, pero otra vez y ya no funciona.

index.html

<div onclick="checak(this)" id="ajio">
    <input type="checkbox" name="uno">
    <p>Matería</p>
</div>

js.js

function checak(div) {
    let allCheck = $("#"+ div.id + " > input[type=\"checkbox\"]");

    let ajio = allCheck.is(":checked") == true ? allCheck.attr("checked", false) : allCheck.attr("checked", true);

    console.log(ajio.is(":checked"));

}

No se si es necesario explicar pero es así, al dar click se buscan todos los checkboxes dentro del div (esto lo hago porque si lo consigo pues agregaré mas checkboxes), luego la variable ajio examina si los checkboxes dentro del div están chekados, si no los marca, y si lo están pues los desmarca, si existe una forma mas sencilla, o pueden ver que error tengo en esto, necesito su ayuda, a y si creen que es mejor que simplemente consiga las id de los checkboxes entonces también díganme.

Pdt: ignoren los nombres, es solo una prueba.

function checak(div) {
  let allCheck = $("#"+ div.id + " > input[type=\"checkbox\"]");

  let ajio = allCheck.is(":checked") == true ? allCheck.attr("checked", false) : allCheck.attr("checked", true);

  console.log(ajio.is(":checked"));

}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div onclick="checak(this)" id="ajio">
  <input type="checkbox" name="uno">
  <p>Matería</p>
</div>

2 respuestas 2

1

De acuerdo a lo que dices en tu respuesta:

jQuery, elegí la última versión y si me funcionó, me fijé que yo estoy usando la 1.9.1, ahora, si saben que versión me viene mejor para esto para que la página no se "sature", por así decirlo, me lo hacen saber, por favor.

No es necesario jQuery para marcar y desmarcar un checkbox al hacer clic en su contenedor y, de hecho, no necesitas Javascript, basta con que el contenedor sea una etiqueta <label>.

<label>
  <input type="checkbox" name="uno"> Materia 1
</label><br>
<label>
  <input type="checkbox" name="dos"> Materia 2
</label><br>
<label>
  <input type="checkbox" name="tres"> Materia 3
</label>

El único "problema" de esto es que la etiqueta <label> es de tipo "bloque en línea" y no puedes incluir dentro etiquetas de tipo "bloque" como encabezados (h1 - h6), párrafos, etc., pero, de ser necesario, lo puedes solucionar fácilmente con CSS:

/* Etiqueta y span interno como bloque, con márgen arriba y abajo */
label.label-block, label.label-block span {
    display: block;
    margin: 1em 0;
}
<label class="label-block">
  <input type="checkbox" name="uno">
  <span>Materia 1</span>
</label>
<label class="label-block">
  <input type="checkbox" name="dos">
  <span>Materia 2</span>
</label>
<label class="label-block">
  <input type="checkbox" name="tres">
  <span>Materia 3</span>
</label>

1
  • Justamente no usaba un label porque no supe como ajustar el tamaño, no tenia idea de que se podía con el display, en serio muchas gracias. Commented el 1 jul. 2021 a las 18:20
0

esto paso, en lo que hacía la pregunta y agregué el ejemplo (es la primera vez que uso esa función), no me funcionaba, y vi a un lado complementos, y ahí estaba jQuery, elegí la última versión, y si me funciono, me fijé que yo estoy usando la 1.9.1, ahora, si saben que versión me viene mejor para esto para que la página no se "sature" por así decirlo, me lo hacen saber, por favor.

A sí, este es el jQuery que agregué en el ejemplo:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Tu Respuesta

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

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