Forum PHP.pl > [js][php] etykieta checkboxa

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [js][php] etykieta checkboxa

puz219

21.01.2008, 20:59:40

Witam.

mam pewien problem, mam funkcje w js, która dodaje mi checkboxy do formularza, tylko, że są to po prostu same okienka, a chcialbym, żeby jeszcze coś kolo nich pisało, tylko nie wiem jak coś takiego zrobić:

Oto kod funkcji dodającej checkboxy:

[XML] pobierz, plaintext 
function dodaj_element(kontener, value){
      var znacznik = document.createElement('input');
      znacznik.setAttribute('type', 'checkbox');
      znacznik.setAttribute('name', 'pple');
      znacznik.setAttribute('value', value);
      znacznik.checked = true; 
      znacznik.className = 'lista';
      var kontener = document.getElementById(kontener);
      kontener.appendChild(znacznik);
}
[XML] pobierz, plaintext

co zrobić, żeby koło checkboxa był jakiś napis:, bo tak, to ma coś takiego:

[+]
[+]

a chcialbym mieć coś takiego:

[+] tekst 1
[+] tekst 2

Proszę o pomoc.

Pozdrawiam

nospor

21.01.2008, 21:12:25

No dopisz jeszcze tworzenie elementu typu LABEL. Skoro masz juz INPUT to LABEL nie powinien byc problemem

puz219

21.01.2008, 22:27:36

Pokombinowałem z tym labelem i wyświetla etykietę, tylko, że jest jeszcze jeden problem.

Wyświetla mi coś takiego:

[+]
Tekst 1
[+]
Tekst 2

Wiem, że jest to związane ze stylami, przynajmniej tak mi sie wydaje, przestawiałem już co nieco, ale dalej nie potrafie rozwiązać tego problemu

Oto kod skryptu z labelem

[HTML] pobierz, plaintext 
<script language="javascript">
<!--
function dodaj_element(kontener, value, nazwisko){
	var znacznik = document.createElement('input');
	znacznik.setAttribute('type', 'checkbox');
	znacznik.setAttribute('name', 'pple');
	znacznik.setAttribute('value', value);
	znacznik.checked = true; 
	znacznik.className = 'lista';
 
	var label = document.createElement("label");
 
	var labeltext = document.createTextNode(nazwisko);
 
	var kontener = document.getElementById(kontener);
	label.appendChild(labeltext);
	kontener.appendChild(znacznik);
        kontener.appendChild(label);
 
}
//-->
</script>
[HTML] pobierz, plaintext

A to arkusz stylów:

[HTML] pobierz, plaintext 
<style type="text/css">
<!--
input.lista { display: block; }
-->
</style>
[HTML] pobierz, plaintext

Proszę o pomoc, chcialbym, żeby wyglądało tak:

[+] Tekst 1
[+] Tekst 2

Pomocy

Pozdrawiam

sobstel

22.01.2008, 02:36:42

styl bardziej powinien być float:left czy też display:inline

puz219

22.01.2008, 09:17:02

@sopel

Właśnie potrzebuje to wyświetlić jeden pod drugim, a nie w linii.

Jak dam float:left, albo display: inline to wtedy mi wyświetla w jednej linii i jest coś takiego:

[+] Tekst 1 [+] Tekst 2 [+] Tekst 3, itd.

A mi chodzi o taki efekt:

[+] Tekst 1
[+] Tekst 2
[+] Tekst 3

Proszę o pomoc, bo sam już chyba nic nie wykombinuję.

Acha i jeszcze coś, sprawdzałem na IE7 i tam jak dodaję checkboxy do formularza to są one domyślnie niezaznaczone, a dałem polecenie:

[XML] pobierz, plaintext 
znacznik.checked = true;
[XML] pobierz, plaintext

, w FF wszystko działa OK.

Co trzeba dopisać/zmienić w skrypcie,żeby w IE też dodawało zaznaczone.

Pozdrawiam.

wojckr

22.01.2008, 09:27:30

A jakbyś dał dla "tekst 1" "tekst 2" ... float:right ?
Albo checkbox+tekst dać w diva i wtedy znacznik byłby inline?

W drastycznych przypadkach generuję tekst np. '<input type="checkbox" name="..... ' i potem wstawiam to do diva poprzez innerHTML (ale najpierw sprawdzam czy da się w lepszy sposóB)

puz219

22.01.2008, 09:59:01

Zrobiłem tak:

[XML] pobierz, plaintext 
function dodaj_element(kontener, value, nazwisko){
      var znacznik = document.createElement('DIV');
      znacznik.innerHTML = '<input type="checkbox" name="maker[]" value=' + value + ' checked="checked" />' + nazwisko;
      
      var kontener = document.getElementById(kontener);
      kontener.appendChild(znacznik);
      
}
[XML] pobierz, plaintext

Chciałbym jeszcze dodać do inputa pole id, które będzie liczba począwszy od 1 i zwiększającą się 1 dla każdego kolejnego inputa, tylko nie wiem, jak coś takiego mam zrobić.

Co dopisać, żeby id zmieniało się automatycznie o 1, czyli, żeby było cos takiego

[HTML] pobierz, plaintext 
<input type="checkbox" id="1" name="maker[]" value="234" checked="checked" />' Tekst 1;
<input type="checkbox" id="2" name="maker[]" value="234" checked="checked" />' Tekst 1;
<input type="checkbox" id="3" name="maker[]" value="234" checked="checked" />' Tekst 1;
[HTML] pobierz, plaintext

Proszę o pomoc.

wojckr

22.01.2008, 14:50:46

Id nie może być tylko liczbą, więc zamiast id="1" powinno być na przykład id="a1", id="a2" itd. (tzn może zadziałać tylko z liczbami, ale to byłoby niepoprawne).

Może tak (działa, sprawdzałem):

CODE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE></TITLE>

<script language="javascript">

function checks() {

var ilosc=100; //ilosc checkboxów
var divs=''; //tu będą divy z checkboxami

for (n=0; n<ilosc; n++) {

value = 'wartosc '+n;
nazwisko = 'nazwisko '+n;

	divs+= '<div><input type="checkbox" name="maker[]" value="' + value + '" checked="checked" id="a' + n +  '" /><label for="a'+n+'">' + nazwisko + '</label></div>';
}

var kontener = document.getElementById('kontener');
kontener.innerHTML=divs;

}

</script>

 </HEAD>

 <BODY onload="checks()">

<form action="" method="get">
  <fieldset id="kontener">
  </fieldset>
</form>

 </BODY>
</HTML>

Nie jest to idealny pomysł, tak jak próbowałeś wcześniej, z przypisywaniem nodów, appendowaniem byłoby znacznie lepiej, ale jesli się nie da..

Zwracaj uwagę na cudzysłowy, bo poprzednio zabrakło przy
...value='+value... | ...value=" '+value...
...(kontener)... | ...('kontener')...

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.