Forum PHP.pl > [HTML][CSS][Javascript] Checkbox w formularzu

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [HTML][CSS][Javascript] Checkbox w formularzu

Forum PHP.pl > Forum > Po stronie przeglądarki

Rastman

30.01.2011, 20:51:55

Witam,
mam taki kod:

[HTML] pobierz, plaintext 
<input style="display:block;margin-top:11px;float:left;" type="checkbox" name="grupa[10]" value="10"checked><img src="images/group/10/group_logo.png">
[HTML] pobierz, plaintext

czyli checkbox i obrazek. Chciałbym, aby po kliknięciu na obrazek checkbox zmieniał swój status zaznaczony/odznaczony. Czy jest taka możliwość? Jak to zrobić?

celbarowicz

31.01.2011, 00:08:22

[PHP] pobierz, plaintext 
<html>
<head>
<script type="text/javascript">
 
function zaznacz()
                 { 
 
 if(document.getElementById('xx').checked==false){document.getElementById('xx').checked=true}else{document.getElementById('xx').checked=false}
 
                 }
</script>
</head>
<body >
<form name="moj">
 
<input name="xx"id="xx" type="checkbox" name="grupa[10]" value="10"  >
<img src="" name="xx2"id="xx2" onClick="zaznacz()";>
</form>
</body>
</html>
 
 
[PHP] pobierz, plaintext

kamil4u

31.01.2011, 17:49:11

Można nieznacznie prościej:

Kod

function zaznacz(){
var el = document.getElementById('xx');
el.checked = !el.checked;
}

Rastman

31.01.2011, 22:02:38

dzięki:) obie wersje pomocne. Jakby jeszcze podłączyć kawałek kodu js zamieniającego kursor w "łapkę" po najechaniu na obrazek byłoby super?

kamil4u

1.02.2011, 16:10:05

To css( cursor ) i hover dla niego. Ew. w JS da się to zrobić(też używając CSS): element.style.cursor = 'typ_kursora'; i odpowiednich zdarzeń na myszkę, ale lepiej użyć CSS.

celbarowicz

1.02.2011, 18:00:58

w img daj style="cursor:pointer; lub w arkuszu stylów tak jak podano wyżej

Rastman

4.02.2011, 13:09:45

naprawdę wszystko działa elegancko, a ja się czegoś nauczyłem. Dzięki

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.