Sep 03

Verificar valores de input checkbox com JQuery

Javascript, JQuery 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



  • Edu­ardo Alencar

    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.

  • http://www.phaneronsoft.com Mar­celo Korjenioski

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

  • Caleb

    Valeu .

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

    Para­bens.

  • Caio Hum­berto

    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.

  • http://www.phaneronsoft.com Mar­celo Korjenioski

    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.

  • Menotti

    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 ??

  • Matt_th20

    cara muito obri­gado, eu adap­tei para minha apli­ca­ção e fun­ci­o­nou per­fei­ta­mente, bom exem­plo.
    Abraços ; )

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