Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS


Moderador: web

 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17735
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Selecionar vários números e depois exibir os mesmo em um input text

01-01-2017 17:25

Nesse post vou mostrar um script usando jQuery onde é permitido selecionar vários botões, onde cada botão representa um número.

Ao clicar no botão é adicionado uma classe que indica que ele foi selecionado. No mesmo momento o valor do botão é colocado em um input text para que posteriormente seja enviado para salvar no banco de dados.

Esse script pode ser usado como base para scripts de loteria, onde o usuário precisa escolher uma quantidade de números clicando nos botões correspondentes.

Segue o script.

<script src="jquery.js"></script> <script> $(function() { $(".numero").on("click", function() { if($(this).hasClass("selecionado")) { $(this).removeClass("selecionado") } else { $(this).addClass("selecionado") } var valores = []; var n = 0; $(".numero").each(function() { if($(this).hasClass("selecionado")) { valores[n] = $(this).html() n++; } }); $("#selecionados").val(valores); }); }); </script> <style> .numero{ border:1px solid #ccc; width:20px; height:20px; text-align:center; float:left; padding:2px 2px; margin:2px 2px; } .selecionado{background-color:#ccc} </style> <div class="numero">1</div> <div class="numero">2</div> <div class="numero">3</div> <div class="numero">4</div> <form> <input type="text" name="" value="" id="selecionados" />

1
A melhor hospedagem para o seu site HostGator!

Quem está online

Usuários navegando neste fórum: Bing [Bot]