Sep 03

Verificar valores de input checkbox com JQuery

JQuery, Javascript Comentar >> Marcelo Korjenioski

Para exe­cu­tar o script abaixo é neces­sá­rio o JQuery

http://docs.jquery.com/Downloading_jQuery

No exem­plo estou usando o JQuery do  Goo­gle APIs.

Segue um exem­plo em fun­ci­o­na­mento.

</code></code></code>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Phaneronsoft - Verificar valores de input checkbox com JQuery</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<input type="checkbox" value="1" name="id[]" class="cinput">1<br>
<input type="checkbox" value="2" name="id[]" class="cinput">2<br>
<input type="checkbox" value="3" name="id[]" class="cinput">3<br>
<input type="checkbox" value="4" name="id[]" class="cinput">4<br>
<input type="checkbox" value="5" name="id[]" class="cinput">5<br>
<input type="checkbox" value="6" name="id[]" class="cinput">6<br>
<input type="checkbox" value="7" name="id[]" class="cinput">7<br>
<button type="button" id="botao">Verificar</button>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script type="application/javascript">
function checkBox() {
var files = '';
// Procura em todos os elementos com a classe cinput na página.
$(".cinput:checked").each(function(){
//Verifica se input checkbox esta marcado
//if(this.checked) {
// Adiciona valor do checkbox
files = files + ' [' + this.value + '] ';
//}
});
alert(files);
}
// Adiciona evento ao botão com a função bind
$("#botao").bind("click", function(){
checkBox();
});
</script>
</body>
</html>

Caso tenha alguma duvida deixe um comentário que terei prazer em ajudar.
Comentários são bem vindos assim posso melhorar a qualidade dos tutoriais aqui apresentados.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Phaneronsoft - Verificar valores de input checkbox com JQuery</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<input type="checkbox" value="1" name="id[]" class="cinput">1<br>
<input type="checkbox" value="2" name="id[]" class="cinput">2<br>
<input type="checkbox" value="3" name="id[]" class="cinput">3<br>
<input type="checkbox" value="4" name="id[]" class="cinput">4<br>
<input type="checkbox" value="5" name="id[]" class="cinput">5<br>
<input type="checkbox" value="6" name="id[]" class="cinput">6<br>
<input type="checkbox" value="7" name="id[]" class="cinput">7<br>
<button type="button" id="botao">Verificar</button>

<script src=“http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js” type=“text/javascript”></script>
<script type=“application/javascript”>
func­tion check­Box() {
var files = ”;
// Pro­cura em todos os ele­men­tos com a classe cin­put na página.
$(“.cinput”).each(function(){
//Verifica se input check­box esta mar­cado
if(this.checked) {
// Adi­ci­ona valor do check­box
files = files + ’ [‘ + this.value + ’] ‘;
}
});
alert(files);
}
// Adi­ci­ona evento ao botão com a fun­ção bind
$(“#botao”).bind(“click”, func­tion(){
check­Box();
});
</script>
</body>
</html>

Com­par­ti­lhe com seus ami­gos:
  • Print
  • Facebook
  • Google Bookmarks
  • PDF
  • RSS
  • Twitter
  • LinkedIn



View Comments to “Verificar valores de input checkbox com JQuery”

  1. Eduardo Alencar Says:
    August 28th, 2009 at 4:01 pm

    Boa tarde,

    Muito bom o seu script e foi muito útil para eu con­cluir um pro­jeto na qual estava tra­ba­lhando, a única coisa que faria dife­rente seria tro­car esse tre­cho de código:
    if(this.checked == true) {
    por esse:
    if(this.checked) {
    Mas isso é só um deta­lhe de pro­gra­ma­dor chato…rsrs

    Mas é isso cara, mas uma vez parabéns.

  2. Marcelo Korjenioski Says:
    August 28th, 2009 at 11:28 pm

    Já fiz a mudança no código e colo­quei um exem­plo fun­ci­o­nando.
    Obri­gado pela sugestão.

  3. Caleb Says:
    October 22nd, 2009 at 10:25 am

    Valeu .

    Tava pre­ci­zando de um exem­plo desse tipo.
    Pas­sar os valo­res por um array.

    Para­bens.

  4. Caio Humberto Says:
    October 30th, 2009 at 11:15 pm

    Obri­gado pelo exemplo

    Só alte­rei um pouco seu código e não pode­ria dei­xar de cola­bo­rar, segue a baixo.

    func­tion check­Box() {
    var files = ”;
    // Pro­cura em todos os ele­men­tos com a classe cin­put na página.
    $(“.cinput:checked”).each(function(){
    //Verifica se input check­box esta mar­cado
    //if(this.checked) {
    // Adi­ci­ona valor do check­box
    files = files + ’ [‘ + this.value + ’] ‘;
    //}
    });
    alert(files);
    }

    o que eu modi­fi­quei, removi o if para saber se estava ou não sele­ci­o­nado e colo­quei o atri­buto :chec­ked na hora de pegar e fazer os obje­tos, com isso tere­mos uma melhora em casos que tenha­mos mui­tos check­box (meu caso).

    Grato.

  5. Marcelo Korjenioski Says:
    October 31st, 2009 at 12:20 am

    Obri­gado pela con­tri­bui­ção Caio.
    Já foi alte­rado o código do exem­plo e esta dis­po­ní­vel para todos.

  6. Menotti Says:
    January 26th, 2010 at 10:24 am

    Olá alguém sabe fazer um esquema pare­cido com este mas ele pegar os valo­res de input com o mesmo nome e con­ca­te­nar tipo

    ele ler estes input e con­ca­te­nar em uma vari­a­vel tipo assim
    5|6|7 ??

Deixe um comentário

blog comments powered by Disqus
Designed by NattyWP Wordpress Themes.
Images by desEXign.