Trabajar con checkbox JQuery

Me encuentro trabajando en una especia de juego y para el he tenido la necesidad de trabajar con checkbox y jquery, así que me tuve que dar a la tarea de investigar y gracias a webintenta he podido resolver algunas de las dudas que he tenido al trabajar en este proyecto:

A continuación expongo unos pequeños snippets o trucos a la hora de trabajar con checkboxes y jQuery. En mi opinión, quizá la forma más adecuada de acceder a los checkboxes mediante jQuery es asignándoles una clase o id. De esta forma podemos actuar sobre los checkboxes de una manera selectiva. Podremos tener más elementos de este tipo en nuestra página web pero sólo actuaremos sobre los que poseen determinada clase o id. Algunos ejemplos:

Comprobar si un checkbox está marcado

 jquery | 
 
 copy code |
?

  1. $(".ck").is(":checked");

Devuelve true si está marcado y false en cualquier otro caso

Marcar un checkbox

 jquery | 
 
 copy code |
?

  1. $(".ck").attr("checked","checked");

Desmarcar un checkbox

 jquery | 
 
 copy code |
?

  1. $(".ck").removeAttr("checked");

Marcar todos los checkboxes

 CSS | 
 
 copy code |
?

  1. $(".ck:checkbox:not(:checked)").attr("checked", "checked");

Desmarcar todos los checkboxes

 jquery | 
 
 copy code |
?

  1. $(".ck:checkbox:checked").removeAttr("checked");

Combinando algunos de lo visto anteriormente podemos realizar fácilmente un check que haga la función de marcar/desmarcar todo y que actue sólo sobre los elementos con la clase “ck”:

 HTML | 
 
 copy code |
?

  1. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  2. <script language="javascript">
  3. $(document).ready(function(){
  4.    $(".check_todos").click(function(event){
  5.      if($(this).is(":checked")) {
  6.    $(".ck:checkbox:not(:checked)").attr("checked", "checked");
  7.   }else{
  8.   $(".ck:checkbox:checked").removeAttr("checked");
  9.   }
  10.    });
  11. });
  12. </script>
  13. <form>
  14. <p><input name="Todos" type="checkbox" value="1" class="check_todos"/>Seleccionar todos</p>
  15. <p>
  16.   <input name="elemento1" type="checkbox" value="1" class="ck"/>elemento 1<br />
  17.   <input name="elemento2" type="checkbox" value="2" class="ck"/>elemento 2<br />
  18.   <input name="elemento3" type="checkbox" value="3" class="ck"/>elemento 3<br />
  19.   <input name="elemento4" type="checkbox" value="4" class="ck"/>elemento 4<br />
  20.   <input name="elemento5" type="checkbox" value="5" class="ck"/>elemento 5</p>
  21. <p>El siguiente check no se verá afectado</p>
  22. <input name="elemento5" type="checkbox" value="5" />elemento n
  23. </form>

Fuente y ejmplo en: Webintenta

8 thoughts on “Trabajar con checkbox JQuery”

  1. Heya! I just wanted to ask if you ever have any trouble with hackers? My last blog (wordpress) was hacked and I ended up losing months of hard work due to no back up. Do you have any solutions to protect against hackers?

    1. to the problem of hackers just use a plugin that periodically performs a backup of the entire site and if ever I have a problem, just restore the sites from the latest backup.

  2. After research just a few of the blog posts on your web site now, and I actually like your way of blogging. I bookmarked it to my bookmark website checklist and will probably be checking back soon. Pls try my web site as nicely and let me know what you think.

    1. Thanks for your comment, i try to visit your site, in which many coats are good but rather I think you’re a spammer that many of the things I listed in Chinese, I hope you are not, anyway thanks for visiting my blog.

Leave a Reply

Your email address will not be published. Required fields are marked *