Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Kelven

Contar checkbox marcados a cada click

Por , em Javascript

Recommended Posts

Kelven    1

Kelven
Postado

Olá pessoal, estou sem ideias para criar uma coisa. Estou precisando que conte a quantidade de checkbox marcados a cada click por exemplo. Que apareça em uma div a quantidade de checkbox automaticamente e cada vez que eu for selecionando mais checkbox que esse número vá somando de acordo com os checkbox marcados. Procurei muito mas não achei nada. Vocês tem alguma ideia de como fazer??

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado 

<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

label { display: block; }

</style>

</head>

<body>

 

<label><input type="checkbox" name="ch[]" /></label>

<label><input type="checkbox" name="ch[]" /></label>

<label><input type="checkbox" name="ch[]" /></label>

<label><input type="checkbox" name="ch[]" /></label>

<label><input type="checkbox" name="ch[]" /></label>

<label><input type="checkbox" name="ch[]" /></label>

<label><input type="checkbox" name="ch[]" /></label>

<label><input type="checkbox" name="ch[]" /></label>

<label><input type="checkbox" name="ch[]" /></label>

<label><input type="checkbox" name="ch[]" /></label>

 

<p id="result"></p>

 

<script>

(function (document) {

"use strict";

var $chs = document.querySelectorAll("input[name='ch[]']"),

$result = document.getElementById("result"),

i = $chs.length;

 

var initialCount = function($chs) {

var i = $chs.length,

count = 0;

while (i--) {

count += ($chs.checked === true) ? 1 : 0;

}

 

return count;

};

 

//conta os checks antes de comecar a clicar

$result.innerHTML = initialCount($chs);

 

while (i--) {

var element = $chs;

element.addEventListener("click", function () {

var count = parseInt($result.innerHTML || 0, 10),

value = this.checked === true ? 1 : -1;

 

$result.innerHTML = count + value;

});

};

 

}(document));

</script>

</body>

</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Snowden    94

Snowden
Postado

jQuery

var count = 0;
$('input:checkbox').click(function(){
    if( $(this).is(':checked') ){
        count++;
    }else{
        count--;
    }
    $('#count').html( count );
});

<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<br />
<p><div id="count">0</div></p>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Kelven    1

Kelven
Postado

O seu funcionou Willian mas agora só tem um probleminha, eu preciso que apareça tipo uma mensagem quando passar de 47 fotos, como eu poderia fazer isso nessa função??

Compartilhar este post

Link para o post
Compartilhar em outros sites

jhrhp    15

jhrhp
Postado

Da pra fazer assim:

jQuery(document).ready(function(){
	jQuery('input[type=checkbox]').click(function(){
		if(jQuery('input[type=checkbox]:checked').length > 47)
			alert('maior');
		else
			alert('menor');
	});
});

Até mais.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado 

  while (i--) {

var element = $chs;

element.addEventListener("click", function () {

var count = parseInt($result.innerHTML || 0, 10),

value = this.checked === true ? 1 : -1;

 

$result.innerHTML = count + value;

 

if ((count + value) > 47) {

alert('passou de 47!');

}

});

};

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito