Visualizzazione dei risultati da 1 a 7 su 7

Discussione: Img come checkbox

  1. #1
    Utente di HTML.it
    Registrato dal
    Jun 2011
    Messaggi
    11

    Img come checkbox

    Spero di essere nella sezione adatta...
    Il mio quesito al quale dovo svariate ricerche nn ho trovato risposta è:
    vorrei far passare delle immagini come checkbox in modo che cliccandole un colpo cambino immagine e inviano la value come parametro assieme a un valore booleano e ripremendole ritornano allo stato iniziale...
    Nel codice che riporto sotto è fatto in checbox con tentativo di immagini messe come commento...è possibile la mia richiesta?

    codice:
    <form name="nomeform">
    						
                            <input type="checkbox" align='left' style='float:left;  margin:2px 0px 0px 0px' value="50" onClick="somma(this.value, this.checked);" name="c1">
                            <font style='float:left'>Lettering (logo solo scrittura):</font><font style='float:right'>&euro 50,00</font>
    
    						
                            <input type="checkbox" align='left' style='float:left;  margin:2px 0px 0px 0px' value="75" onClick="somma(this.value, this.checked)" name="c2">
                            <font style='float:left'>Pittogramma (logo solo simbolo):</font><font style='float:right'>&euro 75,00</font>
    
    						
                            <input type="checkbox" align='left' style='float:left;  margin:2px 0px 0px 0px' value="100" onClick="somma(this.value, this.checked);" name="c3">
                            <font style='float:left'>Composito (logo scrittura + simbolo):</font><font style='float:right'>&euro 100,00</font>
    Grazie in anticipo

  2. #2
    Moderatore di Annunci siti web, Offro lavoro/collaborazione, Cerco lavoro L'avatar di cavicchiandrea
    Registrato dal
    Aug 2001
    Messaggi
    26,133
    Anch'io ho fatto una ricerca con esiti migliori (credo) http://www.google.com/search?hl=en&q=checkbox+immagini nella parte di codice postato ci sono diversi errori (lunghi da spiegare) prova prendere spunti.
    Cavicchi Andrea
    Problemi con javascript, jquery, ajax clicca qui

  3. #3
    Utente di HTML.it
    Registrato dal
    Jun 2011
    Messaggi
    11
    Ho trovato qualocsa che mi cambi immagine e la faccia ritornare...ma ancora non riesco a trovare il modo che premendone una le altre checkbox si deselezionino tutte

  4. #4
    Utente di HTML.it
    Registrato dal
    Jun 2011
    Messaggi
    11
    Facciamo prima cosi...ho tagliato la parte interessata dal mio codice per farvi capire meglio

    codice:
    <html>
    <head>
    	<title>Shop</title>
    	<link rel="stylesheet" type="text/css" href="pixstyle.css" />
        <script language="JavaScript">
    		function somma(v,s){
     		var f=document.nomeform;
     		var realvalue=(f.c.value=="")?0:parseFloat(f.c.value);
     		if(s) f.c.value=realvalue+parseFloat(v)+",00";
     		else f.c.value=realvalue-parseFloat(v)+",00";
    	}
    	</script> 
        <script>
    //global variables that can be used by ALL the function son this page.
    var inputs;
    var imgFalse = 'Spunta.jpg';
    var imgTrue = 'Spunta_ok.jpg';
    
    //this function runs when the page is loaded, put all your other onload stuff in here too.
    function init() {
        replaceChecks();
    }
    
    function replaceChecks() {
        
        //get all the input fields on the page
        inputs = document.getElementsByTagName('input');
    
        //cycle trough the input fields
        for(var i=0; i < inputs.length; i++) {
    
            //check if the input is a checkbox
            if(inputs[i].getAttribute('type') == 'checkbox') {
                
                //create a new image
                var img = document.createElement('img');
                
                //check if the checkbox is checked
                if(inputs[i].checked) {
                    img.src = imgTrue;
                } else {
                    img.src = imgFalse;
                }
    
                //set image ID and onclick action
                img.id = 'checkImage'+i;
                //set image
                img.onclick = new Function('checkChange('+i+')');
                //place image in front of the checkbox
                inputs[i].parentNode.insertBefore(img, inputs[i]);
                
                //hide the checkbox
                inputs[i].style.display='none';
            }
        }
    }
    
    //change the checkbox status and the replacement image
    function checkChange(i) {
        
        if(inputs[i].checked) {
            //inputs[i].checked = '';
            document.getElementById('checkImage'+i).src=imgFalse;
        } else {
            //inputs[i].checked = 'checked';
            document.getElementById('checkImage'+i).src=imgTrue;
        }
        inputs[i].click();
    }
    
    function checkUncheckAll(check_bok, check_name)
    {
        for(j=0; j < inputs.length; j++) 
        {
            if(inputs[j].name==check_name)
            {
                if(check_bok.checked)
                {
                    inputs[j].checked = 'checked';
                    document.getElementById('checkImage'+j).src=imgFalse;
                }
                else
                {
                    inputs[j].checked = '';
                    document.getElementById('checkImage'+j).src=imgTrue;
                }
            }
        }
    }
    
    window.onload = init;
    //-->
    </script>
    	</head>
    <body>
    
    						<h2>Tipologia logo da ritracciare<font color='orange'>*</font></h2>
    
    
                            <form name="nomeform">
                            <input type="checkbox" align='left' style='float:left;  margin:2px 0px 0px 0px' value="50" onClick="somma(this.value, this.checked); checkUncheckAll(this, 'c1')" name="c1">
                            <font style='float:left'>Lettering (logo solo scrittura):</font><font style='float:right'>&euro 50,00</font>
    
                            <input type="checkbox" align='left' style='float:left;  margin:2px 0px 0px 0px' value="75" onClick="somma(this.value, this.checked); checkUncheckAll(this, 'c1')" name="c2">
                            <font style='float:left'>Pittogramma (logo solo simbolo):</font><font style='float:right'>&euro 75,00</font>
    
                            <input type="checkbox" align='left' style='float:left;  margin:2px 0px 0px 0px' value="100" onClick="somma(this.value, this.checked);  checkUncheckAll(this, 'c1')" name="c3">
    
                            <font style='float:left'>Composito (logo scrittura + simbolo):</font><font style='float:right'>&euro 100,00</font>
    
    <hr>
    
    
    						
    						<div id="tot">
    						<h6 style="width:100%"><font style="float:right">&euro;<input style="float:right" size="5" type='text' name="c" value="0"/></font></h6>
                            </div>
                            </form>
    </body>
    </html>
    Questa sezione dovrebbe premendo le prime immagini (che ora non si vedranno se provate il codice a meno che non assegnate di vostre) fare una somma...premendo la prima +50 premendo la seconda dovrebbe togliere i 50 e fare +75 e cosi via...spero di essermi spiegato un po meglio

  5. #5
    Moderatore di Annunci siti web, Offro lavoro/collaborazione, Cerco lavoro L'avatar di cavicchiandrea
    Registrato dal
    Aug 2001
    Messaggi
    26,133
    Ma io faccio fatica a seguirti, prima chiedi checkbox con immagini, poi parli di spunta tutto e fine come fare un calco, di quest'ultimo non si capisce se il codice postato funziona, da errori, o non centra nulla.
    Mi sembra tu abbia molta confusione, e poca conoscenza di js, o sbaglio?
    Cavicchi Andrea
    Problemi con javascript, jquery, ajax clicca qui

  6. #6
    Utente di HTML.it
    Registrato dal
    Jun 2011
    Messaggi
    11
    Scusa faccio solo molta fatica a spiegarmi...ho abbastanza dimistichezza con il linguaggio js comunque...il codice che ho postato è sbagliato l'errore è in questa parte di codice mi pare
    codice:
    <input type="checkbox" align='left' style='clear:left; float:left;  margin:2px 0px 0px 0px' value="50" onClick="somma(this.value, this.checked); checkUncheckAll(this, 'c1')" name="c1">
                            <font style='float:left'>Lettering (logo solo scrittura):</font><font style='float:right'>&euro 50,00</font>
    
                            <input type="checkbox" align='left' style='float:left;  margin:2px 0px 0px 0px' value="75" onClick="somma(this.value, this.checked); checkUncheckAll(this, 'c1')" name="c2">
                            <font style='float:left'>Pittogramma (logo solo simbolo):</font><font style='float:right'>&euro 75,00</font>
    
                            <input type="checkbox" align='left' style='float:left;  margin:2px 0px 0px 0px' value="100" onClick="somma(this.value, this.checked);  checkUncheckAll(this, 'c1')" name="c3">
    in pratica sn 3 checkbox...premendo la prima dovrei trovare il modo di passagli nel parametro al posto di c1 le altre 2 check(c2,c3) usando una sola variabile...in modo tale che premendo la prima(o qualsiasi altre delle 3) si seleziona quella premuta e di conseguenza tutte le altre check si uncheckano...è difficile da spiegare ma spero di essere riuscito

  7. #7
    Moderatore di Annunci siti web, Offro lavoro/collaborazione, Cerco lavoro L'avatar di cavicchiandrea
    Registrato dal
    Aug 2001
    Messaggi
    26,133
    Io continuo a non capire, forse un esempio online della pagina potrebbe aiutare.
    Cavicchi Andrea
    Problemi con javascript, jquery, ajax clicca qui

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2026 vBulletin Solutions, Inc. All rights reserved.