[JS][Jquery]Obrazek zamiast checkboxa Opcje

[grzes999]

Witam
Potrzebuję zrobić na stronie żeby checkboxy były obrazkami. Wiem że jest coś takiego jak prettyCheckboxes ale tam jest styl dla wszystkich checkboxów jeden a mi potrzeba żeby dla każdego był inny.
Chodzi mi o to że na stronie będzie można wybrać jakieś wyposażenie i zamiast klikać na chceboxa chciał bym żeby użytkownik klikał na obrazek i dlatego dla każdego musi być inny.

[kamil4u]

Znasz się trochę na JS czy chcesz gotowca? Jeżeli o drugie to nie znam, a jeżeli to pierwsze i chcesz to sam napisać mogę dać Ci kilka wskazówek "jak to się robi"

--edit--
@down: o "label" nie pomyślałem

Jedyny problem to podmiana obrazków

--edit2--
@down:

Chyba nie do końca się zrozumieliśmy

Jak mniemam nie jest to dla Ciebie problemem, ale dla autora tematu być może tak, dlatego napisałem, że z użyciem label pozostaje to zagadnienie.

Osobiście zostawiłbym zwykły checkbox z napisem obok( HTML ), a za pomocą JS usunął napis, zrobił checkbox-a niewidzialnym, a następnie utworzył przez DOM obrazek, który zmieniałby się i naszego chceckbox-a. Dzięki temu zarówno ludzie bez JS jak i z JS, będą mogli bardzo wygodnie korzystać ze strony. Oczywiście wszystko zależy jak to ma dokładnie wyglądać.

Ten post edytował kamil4u 15.04.2012, 13:46:45

[Niktoś]

http://jsfiddle.net/y6S9j/

Edit.Nie jest problem podmienić obrazki, w jquery podmieniasz src img po id.
Można także używać styli w css,ale to chyba najprostszy sposób.

Ten post edytował Niktoś 15.04.2012, 13:37:46

[grzes999]

Myślę że dał bym to radę sam napisać tylko nie bardzo wiem jak to ugryźć

I tak ma to wyglądać


Chodzi mi o to żeby nie dawać checkboxa,obrazka i napisu tylko zastąpić checkboxa odpowiednim obrazkiem.

[kamil4u]

Wpadłem na trochę inny pomysł - chyba najlepszy.
Za pomocą CSS 3( tylko ): http://jsfiddle.net/y6S9j/2/

Jak potrzebujesz, żeby to działało również pod starszymi przeglądarkami to użyj np. jQuery - szybko przerobisz kod CSS-u. A jeżeli nie chcesz korzystać z biblioteki to napisz, to postaram się doradzić Ci jeśli chodzi o czysty JS.

Pamiętaj, że to kod pisany na szybko - czyt. działa, ale do poprawy.

[Monter08]

Zobacz tutaj.

[Niktoś]

Kamil4You fajny ten Twój przykładzik:)

[kazag]

Daj sobie gdzieś ukryty formularz, tam będą checkboksy, do tego dajesz sobie anchory, które widzi user.

Anchorowi dajesz w tle obrazek i robisz dla niego klasę active (lub niekoniecznie, jak wolisz), po kliknięciu na anchora zaznaczasz JSem odpowiedni checkbox (getElementById.checked=true) a temu anchorowi nadajesz lub zdejmujesz klasę active, która steruje jego tłem. Możesz też bez tej klasy, np. w stylach zmienić background:url(img/obrazek.png) na background:url(img/obrazek_active.png) anchorowi. Relację między anchorem a checkboxem możesz trzymać np. w atrybucie rel.

[grzes999]

kamil4u wielki dzięki bardzo dobre rozwiązanie teraz tylko siadać i pisać.
Jak będę miał jakiś problem to napiszę.