witam.
mam pytanie otoz czy jest mozliwość zmieny wygladu Checkbox'a ? dokałdnie mi chodzi ze jak nacisne na niego to zmienia sie na inny obrazek a nie zeby było dalej fajka ?
w praktyce to tak: wlaczam strone i mozliwe jest wybraniu dwoch chceckbox'ow,przed nacisnieciem maja kolor czarny a po nacisnieciu np. czerwony(kolorowy)

oto input

[HTML] pobierz, plaintext 
<input type="checkbox" name="i[]" class="input" value="'.$i.'" onclick="if (this.checked) return sprawdz(this); else odejmij()" />
[HTML] pobierz, plaintext 

a funkcja w js to

[PHP] pobierz, plaintext 
<script language="Javascript">
 
maxBoxow = 2;
zaznaczoneBoxy = 0;
function sprawdz(theBox) {
   if (zaznaczoneBoxy+1 > maxBoxow) {
          alert('Maksimum to '+maxBoxow);
          return false;
   }
   zaznaczoneBoxy++
 
   return true;
}
function odejmij() {
   zaznaczoneBoxy--
 
}
 
</script>
[PHP] pobierz, plaintext 

Z góry dziekuje

Jeśli Cię dobrze zrozumiałem powinno Cie to nakierować:
http://mynthon.net/howto/JavaScript%20-%20...r%20inputs.html
http://mynthon.net/_projects/custom_checkboxes/

Opis bardzo skromny, ale patrząc do źródła to nic trudnego w razie pytań pisz!

tak tak o to mi chodzi ;] tylko teraz pasuje połaczyć mój skrypt z tym co jest na tamtej stronie ;/ jak możesz to pomóż mi hehe ;] ja tez bede próbowac ;]

Łap gotowca w 2 i 3 linijce zmień sobie te obrazki na swoje takie np 16x16px (UWAGA! nie możesz zamiast obrazka jako tło dać kolor tła bo 'wyleje' się na całe pole label!) Aby to działało dobrze potrzebny jest też malutki obojętnie jaki obrazek (patrz linijka 15) a wszystkie checkbox'y muszą być w polach label - wynika to z budowy skryptu (20 linijka) Myślę że teraz już dasz rade, pozmieniaj sobie te obrazki na swoje (przypominam 2, 3 i 15 linijka!) Nie wygląda to najlepiej możesz to umieścić w oddzielnym pliku lub jak sam wolisz

[HTML] pobierz, plaintext 
<style type="text/css">
    label.custom-chkon{background: url('http://icons3.iconfinder.netdna-cdn.com/data/icons/Sizicons/16x16/accept_green.png') no-repeat 0 50%; padding-left: 20px;display:block;}/* checkbox checked */
    label.custom-chkof{background: url('http://icons3.iconfinder.netdna-cdn.com/data/icons/Sizicons/16x16/cancel_round.png') no-repeat 0 50%; padding-left: 20px;display:block;}/* checkbox unchecked */
</style>
<script type="text/javascript">
    function customFormButtons(o, cp){
        /*
         * CUSTOM CHECKBOXES AND RADIO INPUTS
         * author: http://mynthon.net/
         * date: 2008-09-16 19:00
         * please leave this note
         * free for any use
         * ENJOY!
         */
        var testImageName = 'http://mynthon.net/_projects/custom_checkboxes/test.gif'; // !!! IMPORTANT - LINK TO TEST IMAGE
        if(typeof(cp)=='undefined'){var cp = '';} //class prefix
        var IE/*@cc_on=1@*/
        var d = new Date();
        custChkRadioOnchangeEvent = function(e, o, cp){
            var lb = o.getElementsByTagName('label');
            for(var i=0; i<lb.length; i++){
                var inp = lb[i].getElementsByTagName('input')[0];
                if(inp.type=='checkbox'){
                    if(inp.checked!=false){lb[i].className = cp + 'custom-chkon';}else{lb[i].className = cp + 'custom-chkof';}
                }else if(inp.type=='radio'){
                    if(inp.checked!=false){lb[i].className = cp + 'custom-radon';}else{lb[i].className = cp + 'custom-radof';}
                }
            }
        }
        this.bindEvent = function (obj, typ, fn, o, cp){
            obj["e"+typ+fn] = fn;
            if (obj.addEventListener){
                obj.addEventListener(typ, function(event){obj["e"+typ+fn](event, o, cp)}, false);
            }else if(obj.attachEvent){
                obj[typ+fn] = function(){obj["e"+typ+fn](window.event, o, cp);}
                obj.attachEvent("on"+typ, obj[typ+fn]);
            }
        }
        this.customCheckableBtn = function(o){
            if(typeof(o)=='string'){o=document.getElementById(o);}
            var lab = o.getElementsByTagName('label');
            for(var i=0; i<lab.length; i++){
                var inp = lab[i].getElementsByTagName('input')[0];
                if(inp.type=='checkbox' || inp.type=='radio'){
                    if(IE){
                        if(inp.id==''){inp.setAttribute('id', cp + 'customCheckableID_' + d.getTime() + i);}
                        lab[i].htmlFor = inp.id;
                        this.bindEvent(inp, "click", custChkRadioOnchangeEvent, o, cp);
                    }
                    inp.style.position = 'absolute';
                    inp.style.left = '-9999px';
                    this.bindEvent(inp, "change", custChkRadioOnchangeEvent, o, cp);
                    lab[i].className = (inp.type=='checkbox' ? cp + 'custom-chkof' : cp + 'custom-radof');
                }
            }
            custChkRadioOnchangeEvent(null, o, cp);
        }
        this.customCheckableInit = function(o){
            if(!document.getElementById || !document.getElementsByTagName){return;}
            //check if browser supports images
            var testImg = new Image();
            testImg.src = testImageName + '?' + d.getTime();
            testImg.onload = this.customCheckableBtn(o);
        }
        this.customCheckableInit(o);
    }
 
    window.onload = function(){
        /*
         * example 1
         * add styles for all labels inside 'myForm' element
         * it doesn't have to be form element. It can be div or fieldset.
         */
        customFormButtons('myForm');
    }
</script>
<script language="Javascript">
    maxBoxow = 2;
    zaznaczoneBoxy = 0;
    function sprawdz(theBox) {
        if (zaznaczoneBoxy+1 > maxBoxow) {
            alert('Maksimum to '+maxBoxow);
            return false;
        }
        zaznaczoneBoxy++
 
        return true;
    }
    function odejmij() {
        zaznaczoneBoxy--
    }
</script>
<form id="myForm" method="get" action="">
    <label><input type="checkbox" name="i[]" class="input" value="'.$i.'" onclick="if (this.checked) return sprawdz(this); else odejmij()" />odznaczone</label>
    <label><input type="checkbox" name="i[]" class="input" value="'.$i.'" onclick="if (this.checked) return sprawdz(this); else odejmij()" />odznaczone</label>
    <label><input type="checkbox" name="i[]" class="input" value="'.$i.'" onclick="if (this.checked) return sprawdz(this); else odejmij()" />odznaczone</label>
    <label><input type="checkbox" name="i[]" class="input" value="'.$i.'" onclick="if (this.checked) return sprawdz(this); else odejmij()" />odznaczone</label>
</form>
[HTML] pobierz, plaintext 

Pozdrawiam

zrobiłem juz wcześniej niz mi wysłałem ale dzieki
jest tylko jeden problem bo wyswietla mi kazdy input pod wcześniejszym inputem czyli jeden pod drugim
mam zastosowana petle do inputow

[PHP] pobierz, plaintext 
for($i=0; $i<=99; $i++) {
	if($i%10==0) 
	$srodek .= '<br />';
 
 $srodek .= '<label><input type="checkbox" name="i[]" class="input" value="'.$i.'" onclick="if (this.checked) return sprawdz(this); else odejmij(this)"/><font class="strona">'.$i.'</font></label>';
 
 }
[PHP] pobierz, plaintext 

jeszcze przed dodanie ten nowej funkcji chodziło dobrze,10 inputów w jednej lini
dowiedziałem sie ze to prze to mi daje taki efekt display: block; ale jak to usune to mi sie robia takie małe kwadraciki z mało widocznym obrazkiem

prosze o to jeszcze i daje wam spokoj

Zmień style na:

[HTML] pobierz, plaintext 
    label.custom-chkon{background: url('http://icons3.iconfinder.netdna-cdn.com/data/icons/Sizicons/16x16/accept_green.png') no-repeat 0 50%; padding-left: 20px; display: block; float: left;}
    label.custom-chkof{background: url('http://icons3.iconfinder.netdna-cdn.com/data/icons/Sizicons/16x16/cancel_round.png') no-repeat 0 50%; padding-left: 20px; display: block; float: left;}
[HTML] pobierz, plaintext 

tzn. ikonki sobie swoje podstaw i jedna mała uwaga, w IE 8 źle działa twoje zabezpieczenie 'Maksimum to 2' otóż po zaznaczeniu dwóch checkbox'ów gdy kliknę na trzeci wyświetla się alert ale po kliknięciu OK jednak zaznacza się 3 checkbox. Nie znam na tyle JS by Ci pomóc ale pomyśl nad tym, i sprawdzaj po stronie serwera ile pól zostało zaznaczone!