immagini al posto delle checkbox

[DigItalWarrior]

Ciao ragazzi,
ho trovato uno sciptino semplic e molto carino che al posto delle classiche checkbox fa vedere delle immaginette come queste:

Con questo script però non riesco a fare in modo che quando clicco su una checkbox mi seleziona/deseleziona automaticamente tutte le altre.
Ho provato parecchi script ma probabilmente vanno in conflitto con questo che vi propongo.
Di contro se tolgo lo script per le immagni i checkbox si selezionano e deselezionano a meraviglia.

Ecco lo scipt

//global variables that can be used by ALL the function son this page.
var inputs;
var imgFalse = 'images/false.png';
var imgTrue = 'images/true.png';

//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;
    }
}

window.onload = init;
//--> 

Chi mi da una mano a fa in modo che al click su un checkbox mi seleziona tutte le altre mantenendo le immagini?

[deleted_110]

Non capisco esattamente il problema.

Lo script funziona, mi pare. Cosa intendi con

Con questo script però non riesco a fare in modo che quando clicco su una checkbox mi seleziona/deseleziona automaticamente tutte le altre.

?

Forse vorresti un comportamento tipo radiobutton, che un solo radio alla volta e' selezionato?

[DigItalWarrior]

Ciao
Si si cosi per funzionare funziona ma se volessi far una cosa tipo questa invece no.
Il poblema è che finché mantengo lo script postato in questo thread non non riesco a selezionare/deselezionare le altre caselle, mentre tolto questo script ovviamene tutto funziona.

Ciao

[deleted_110]

certo, non va perche' il tuo script reagisce solo al click del mouse, e non modifica le immaginette se e' js a modificare il valore del check.

Io ti consiglio di scriverti a mano la funzione "selezionaTutti" / "deselezionaTutti" non e' molto difficile.

Oppure potresti modificare lo script perche' reagisca anche all'onchange. Ma mi pare che IE e FF gestiscano l'onChange in modo diverso per cui potrebbe dare problemi su IE...

Se vuoi posso aiutarti a scrivere una funzione che sia compatibile col tuo script

[DigItalWarrior]

Originariamente inviato da raven74
Se vuoi posso aiutarti a scrivere una funzione che sia compatibile col tuo script

Guarda non so come ringraziarti davvero. Premetto che non ho premura comunque quindi se hai voglia lo si può fare con molta calma. Non è prioritario.

Ciao e grazie per la tua enorme disponibilità

[deleted_110]

Guarda, ho un po' improvvisato. Vedo che su FF va, ma non ho IE per provare

<script>
//global variables that can be used by ALL the function son this page.
var inputs;
var imgFalse = 'images/false.png';
var imgTrue = 'images/true.png';

//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=imgTrue;
            }
            else
            {
                inputs[j].checked = '';
                document.getElementById('checkImage'+j).src=imgFalse;
            }
        }
    }
}

window.onload = init;
//-->
</script>

<input type="checkbox" value="prova_1" name="prova"> 

<input type="checkbox" value="prova_2" name="prova"> 

<input type="checkbox" value="prova_3" name="prova"> 

<input type="checkbox" value="prova_4" name="prova"> 

<input type="checkbox" value="prova_5" name="prova"> 

selezione tutto 
<input type="checkbox" onClick="checkUncheckAll(this, 'prova')">

[DigItalWarrior]

Mamma mia sei spaventoso! Funziona tutto alla grande.
Se ti va passami qualche link di tuoi siti perché meriti un link in bella vista meglio ancora qualche banner o logo.
Ho oltre 30 siti da fare e metterò volentieri un link verso i tuoi siti per ogni mio sito.