Marketing, Novas Mídias e Redes Sociais

Limitar a quantidade máxima de checkbox selecionados

Vejamos um simples script que limita a quantidade de checkbox que podem ser selecionados. É importante ressaltar que para que o script funcione perfeitamente todos os componentes do tipo checkbox devem ter o mesmo nome. Para usar a função basta chama-la da seguinte forma:

maximoCheckboxarCheckbox(document.forms.formulario.nome_elemento, x);

sendo que o X definirá quantos checkbox poderão ser marcados simultaneamente.

Vamos ao código:

<html>
<head>

<script type=”text/javascript”>

function maximoCheckboxarCheckbox(nome, maximoCheckbox){
    for (var i=0; i<nome.length; i++){
        nome[i].onclick=function(){
        var num_marcados=0;
        for (var i=0; i<nome.length; i++)
            num_marcados+=(nome[i].checked)? 1 : 0
        if (num_marcados>maximoCheckbox){
            alert(“O número máximo de elementos que podem ser selecionados é “+maximoCheckbox+”");
            this.checked=false;
            }
        }
    }
}
 
</script>

</head>
<body>
 
<form name=”formulario”>
<input type=”checkbox” name=”elemento”/> Elemento 1<br />
<input type=”checkbox” name=”elemento”/> Elemento 2<br />
<input type=”checkbox” name=”elemento”/> Elemento 3<br />
<input type=”checkbox” name=”elemento”/> Elemento 4<br />
<input type=”checkbox” name=”elemento”/> Elemento 5<br />
</form>
 
<script type=”text/javascript”>
maximoCheckboxarCheckbox(document.forms.formulario.elemento, 2);
</script>
 
</body>
</html>
Veja Exemplo | Limitar a quantidade máxima de checkbox selecionados

4 comentários em “Limitar a quantidade máxima de checkbox selecionados”

  • Rosni Cidao

    Olá Marquinh05 !!!

    Muito obrigado !!! era exatamente isso que fiquei tanto tempo tentando fazer…mas não tinha sacado de por a chamada da função após o formulário ! eu tava tentando usar o onClick no checkbox…rsrs
    Valeu !!!

  • Leonardo

    Olá Marquinh05 !!!
    eu estou criando os s dentro de uma div “scrollBox” que eu criei no meu css… Se não estiver no form ele não funciona??

    Abração!

  • Leonardo

    aahhh.. já consegui! Eu estava usando um form dentro de outro form :P
    Como faço pra encrementar essa function e colocar também o Min. de 01 item selecionado!?

    Um abraço!

  • jeff

    mas como recuperamos as variaveis quando enviamos ou como fazer uma array com os elementos selecionados

  • Participe, deixe seu comentário!