Lidando com checkbox no JQuery

25 de Novembro de 2006

Se você precisa lidar com checkboxes e está usando JQuery, veja este plugin que criei.

/*
Author: Nando Vieira
License: Public Domain
*/
jQuery.fn.check = function(mode)
{
    mode = mode || 'on';
 
    return this.each(function(){
        if (this.type == 'checkbox') {
            jQuery.fn._setCheckboxState(this, mode);
        } else {
            $(this).field('checkbox').each(function(){
                jQuery.fn._setCheckboxState(this, mode);
            });
        }
    });
}
 
jQuery.fn._setCheckboxState = function(checkbox, mode)
{
    switch (mode) {
        case 'toggle':
            checkbox.checked = !checkbox.checked;
            break;
        
        case 'off':
            checkbox.checked = false;
            break;
        
        case 'on':
            checkbox.checked = true;
            break;
    }
}
 
jQuery.fn.field = function(type, filter)
{
    var rule;
    filter = filter || '';
    
    if(type == 'all' || !type) {
        rule = 'input|textarea|select';
    } else {
        if (type != 'select' && type != 'textarea') {
            rule = 'input[@type=' + type + ']';
        } else {
            rule = type;
        }
    }
    
    return jQuery(rule, this).not(filter);
}

Se preferir, pode passar o próprio elemento:

$('form fieldset#preferences input[@type=checkbox]').check();

De quebra, você leva uma função que retorna todos os elementos de formulário identificados pelo tipo. Por exemplo, para retornar todos os campos "password", você pode usar:

$('form').field('password').each(function(){
    alert($(this).name());
});

Você também pode filtrar quais campos quer exibir. O exemplo abaixo pega todos os campos do formulário, com exceção de "password":

$('form').field('all', '[@type=password]').each(function(){
    alert($(this).name() + ' = ' + $(this).val());
});

Campos do tipo "select" e "textarea" também entram na lista de "input".

Download: jquery-checkbox.js
Tamanho: 912 bytes

Bug Fix

  • A regra "all" retornava todos os "selects" e "textareas" da página e não apenas do elemento.

Comentários #

#1 Tiago disse:
26 Nov 06, 04:30PM

Muito legal!!

#2 Felipe Correa disse:
27 Nov 06, 02:23PM

Gostaria de saber qual plugin você usa para postar códigos em seu blog.

Já revirei por tudo em busca de um bom e não encontrei :(

Se puder me manda o endereço de onde você pegou por email.

Muito obrigdo :)

#3 Nando Vieira disse:
27 Nov 06, 02:43PM

Felipe: dá uma olhada neste comentário. http://simplesideias.com.br/wp-coders/#comment-4

#4 Felipe Correa disse:
27 Nov 06, 03:06PM

Mas como faço para que o código não seja interpretado? Apenas usando o Geshi funciona?

#5 Nando Vieira disse:
27 Nov 06, 03:36PM

Então. Eu removi diversos filtros que vem ativado por padrão no WP. Aí, o que eu colocar no post, vai aparecer na página. Tenta esse plugin: http://www.coffee2code.com/wp-plugins/wpuntexturize.phps

#6 agencia de web disse:
27 Jun 07, 11:32AM

nao sei se e possivel temos como colocar limite
eu coloco 20 opcao e o cara poder escolhe so 5 ? :)
se aqui for o departamento de sugestao ta ai
minha

kakaroto
http://www.obsidiann.com

#7 Vinicius Mendes disse:
31 Jul 08, 11:40PM

Primeiramente, obrigado por compartilhar o conhecimento...

Mas tenho uma pergunta: Como seria uma função para desmarcar o checkbox? Se não existir, fica como sugestão...

#8 Edson Rodrigues disse:
13 Ago 08, 01:55PM

Tenho userfomr como formulário de lançamento de dados, nele coloquei um checkbox.
Preencho os campos necessários e marco o checkbox para inserimeto.
Queria saber o comando para depois do inserimento o checkbox ficar vazio para que eu possa escolher na hora de outro inserimento.
Obrigado!

Deixe um comentário




Este blog usa o Gravatar.


Não é aceito código HTML: adicione-o no pastie.org ou paste.milk-it.net e poste apenas o link.

Se este é seu primeiro comentário, ele terá que ser aprovado antes de ser exibido.