Forum PHP.pl > [jQuery] Problem z chexboxami i listami rozwijalnymi

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [jQuery] Problem z chexboxami i listami rozwijalnymi

raval

1.04.2011, 12:06:32

Witam,

Mam problem zwiazany z zaznaczeniem checkboxow. Podkreślam, ze jestem poczatkujacy.

Problem polega na tym, ze dla kazdego zaznaczonego check boxa, ma sie pojawic lista rozwijalna.

Poniżej zamieszczan kod HTML:

Kod

<table border="0" style="display: inline;">


            <tr><td><input type="checkbox" name="dotykowy" value="1" id="box"  />android</td>

            <td><select id="lista" name="nazwa" value="1">
                  <option>-- wybierz --</option>
            </select>
            </td></tr>


            <tr><td><input type="checkbox" name="zwykły" value="2" id="box" />windows</td>

            <td><select id="lista" name="nazwa" value="2">
                  <option>-- wybierz --</option>
            </select>
            </td></tr></table>

Stworzylem tabele, w ktorej mieszcza sie w przykładzie dwa "checkbox'y" oraz dwie listy rozwijalne, ktore sa ukryte (planuje by bylo ich wiecej).

Teraz poprzez jQuery chcialbym by przy kliknieciu checkboxa, lista sie pojawila. Napisalem maly skrypcik, gdzie pojawia sie, ale tylko dla pierwszego checkboxa, drugi w ogole nie dziala.

Moje pytanie brzmi jak napisac poprawnie skrypt jQuery, zeby dzialal na wszystkich checkboxow, tzn. ze jak zaznacze drugi checkbox, pojawi sie druga lista rozwijalna.

Ponizej zamieszczam moj skrypcik:

Kod

$(document).ready(
   function()
   {
        $("#box").click(function(){
      if($(this).is(":checked") )
      //if($(this).attr("checked")) //attribute
      {
      $("#lista").show();
      //$(this).next("#lista").show();
      }
      else
      {
      $("#lista").hide();
      }

      });

Bardzo proszę o pomoc

pablo_83

1.04.2011, 12:18:39

po pierwsze id nie mogą być takie same -> wywali ci błędy już sam walidator html

daj sobie id np #lista1, lista2 itd
wtedy pobierz sobie wartość value z zaznaczonego checkboxa

i wyświetlasz listę dla danego checkboxa

[HTML] pobierz, plaintext 
$(document).ready(
   function()
   {
        $("#box").click(function(){
      if($(this).is(":checked") )
        {
var nr_listy = $(this).val();
      $("#lista"+nr_listy).show();
 
      }
      else
      {
       $("#lista"+nr_listy).hide();
      }
 
      });
[HTML] pobierz, plaintext

w sumie elsa też możesz usunąć, wystarczy że do list dopiszesz display:none to one domyslnie nie będą widoczne, pokażą się dopiero po zaznaczeniu checkboxa

raval

1.04.2011, 16:39:29

Problem rozwiązany, dzieki wielkie za pomoc pablo_83

Tak wyglada kodzik po poprawce:

Kod

$("input:checkbox").click(function(){

var nr_listy = $(this).val();

if($(this).is(":checked") )
{
$("#lista"+nr_listy).show();
}
else
{
$("#lista"+nr_listy).hide();
}
});

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.