Ir para conteúdo

POWERED BY:

Arquivado

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

Rafael Fiori

[Resolvido] Substituindo checkbox por imagens

Por , em Desenvolvimento frontend

Recommended Posts

Rafael Fiori    2

Rafael Fiori
Postado

Olá pessoal, sou novo por aqui, e este é meu primeiro post. Estou começando agora a mecher com WEB e como todo iniciante estou apanhando muito, para aprimorar meu aprendizado estou desenvolvendo um sisteminha de loteria, só que estou enroscado em uma parte que não consigo mais evoluir e gostaria da ajuda de vocês.

Imagem Postada

Na imagem acima eu consegui substituir o checkbox por uma imagem usando CSS, mas oque eu estou precisando é conseguir trocar as outras checkboxes (5 ao todo) pelas respectivas imagens 2, 3, 4, 5. Fiz uma montagem no PS pra entenderem o resultado que eu estou buscando.

 

Imagem Postada

 

É isso, onde cada numero seria uma checkbox. Tentei utilizando o CSS mas se alguem souber algum jeito de fazer isso pode ser em jscript ou qualquer outra coisa.

 

Segue o codigo que cheguei até o momento:

<html>
<head>
	<title>Teste CheckBox</title>
	<style>
  		input[type=checkbox] {
		    display:none;
		}

  		input[type=checkbox] + label {
			background: url('1u.png') 0 0px no-repeat;
        	        height: 35px;
        	        width: 25px;
        	        display:inline-block;
        	        padding: 0 0 0 0px;
    	        }
   
	        input[type=checkbox]:checked + label {
			background: url('1c.png') 0 0px no-repeat;
	                height: 35px;
	                width: 25px;
    	                display:inline-block;
       	                padding: 0 0 0 0px;
    	        }
	</style>
</head>

<body>
	<div>
		<p align="center">
   		<input type='checkbox' name='cb01' value='1' id="cb01"/>   <label for="cb01"></label>
	 	<input type='checkbox' name='cb02' value='1' id="cb02"/>   <label for="cb02"></label>
   		<input type='checkbox' name='cb03' value='1' id="cb03"/>   <label for="cb03"></label>
   		<input type='checkbox' name='cb04' value='1' id="cb04"/>   <label for="cb04"></label>
		<input type='checkbox' name='cb05' value='1' id="cb05"/>   <label for="cb05"></label>
		</p>
	</div>
</body>

</html>

Preciso de uma luz! Abraços

Compartilhar este post

Link para o post
Compartilhar em outros sites

Evandro Oliveira    331

Evandro Oliveira
Postado

Porque não faz com Javascript?

 

<form action="" method="post" id="loteria">
   <fieldset></fieldset>
   <button type="submit">Apostar!</button>
</form>

 

#loteria input { display: none; }

var Options = new Array();

var createNumber(n, into){
    var img = document.createElement('img');
    var opt = document.createElement('input');
    img.src = n + '.jpg';
    img.alt = n;
    opt.name = 'numero[]';
    opt.type = 'checkbox';
    opt.value = n;
    
    img.checked = false;
    img.onclick = function(){
        if(opt.checked){
            img.src = n + '.jpg';
            opt.checked = false;
            Options.splice(array_find(n, Options));
        }
        else if(Options.length < 6) {
            img.src = n + '_check.jpg';
            opt.checked = true;
            Options.push(n);
    }

    into.appendChild(img);
    into.appendChild(opt);
}

window.onload = function(){
    var frm = document.getElementById('loteria').getElementsByTagName('fieldset').item(0);
    for(var i = 1; i < 61; i++) new createNumber(i, frm);
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

Rafael Fiori    2

Rafael Fiori
Postado

Obrigado Evandro, mas esta dando um erro na linha:

var createNumber(n, into){

 

pelo debug do chrome o erro é:

Uncaught SyntaxError: Unexpected token (

 

o codigo que estou usando é esse

 

<html>
<head>

<style>
#loteria input { display: none; }
</style>

</head>

<body>

<form action="" method="post" id="loteria">
    <fieldset></fieldset>
    <button type="submit">Apostar!</button>
</form>

<script language="JavaScript" type="text/javascript">
var Options = new Array();

var createNumber (n, into){
    var img = document.createElement('img');
    var opt = document.createElement('input');
    img.src = n + 'u.png';
    img.alt = n;
    opt.name = 'numero[]';
    opt.type = 'checkbox';
    opt.value = n;

    img.checked = false;
    img.onclick = function(){
        if(opt.checked){
            img.src = n + 'u.png';
            opt.checked = false;
            Options.splice(array_find(n, Options));
        }
        else if(Options.length < 6) {
            img.src = n + 'c.png';
            opt.checked = true;
            Options.push(n);
    }

    into.appendChild(img);
    into.appendChild(opt);
}

window.onload = function(){
    var frm = document.getElementById('loteria').getElementsByTagName('fieldset').item(0);
    for(var i = 1; i < 61; i++) new createNumber(i, frm);
}
</script>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Rafael Fiori    2

Rafael Fiori
Postado 

<html>
<head>

<style>
#loteria input { display: none; }
</style>

</head>

<body>

<form action="" method="post" id="loteria">
    <fieldset>
    </fieldset>
    <button type="submit">Apostar!</button>
</form>

<script language="Javascript" type="text/javascript">
var Options = new Array();

var createNumber = function(n, into){
    var img = document.createElement('img');
    var opt = document.createElement('input');
    img.src = n + 'u.png';
    img.alt = n;
    opt.name = 'numero[]';
    opt.type = 'checkbox';
    opt.value = n;
    
    img.checked = false;
    img.onclick = function(){
        if(opt.checked){
            img.src = n + 'u.png';
            opt.checked = false;
            Options.splice(array_find(n, Options));
        }
        else if(Options.length < 6) {
            img.src = n + 'c.png';
            opt.checked = true;
            Options.push(n);
    }

    into.appendChild(img);
    into.appendChild(opt);
}

window.onload = function(){
    var frm = document.getElementById('loteria').getElementsByTagName('fieldset').item(0);
    for(var i = 1; i < 61; i++) new createNumber(i, frm);
}
}</script>
</body>
</html>

Agora o codigo ta rodando beleza, mas as imagens das checkbox nao aparece, oque eu fiz foi colocar o arquivo HTML na raiz junto com as imagens 1c.png // 1u.png // 2c.png // 2u.png etc...

Pq será que não ta indo?

Compartilhar este post

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

Informação importante

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

  Aceito