jQuery Click függvény használata

A jQuery Each-hez hasonlóan a 'Click' függvény használatára is nagyon gyakoran szükségünk lehet.

Leggyakoribb ilyen esetek:

• - amikor egy gombra vagy képre kattintva egy kis dialog ablakot akarunk megjeleníteni (ilyen pl az overlay-es ablakoknak nevezett, fekete enyhén átlátszó háttérrel ellátott ablakok),
• - amikor azt szeretnénk elérni, hogy egy linkre kattintva az oldal ne menjen el az adott linkre
• - amikor egy listában (táblázatban) szereplő checkbox-ra kattintunk és szeretnénk, hogy kiszínezze az adott sort

Vegyük tehát a jQuery Each-nél is használt listát, mely lista minden eleme tartalmaz egy checkbox-ot, és színezzük ki az adott checkboxhoz tartozó sort abban az esetben ha bepipáljuk őket.

Íme az alábbi táblázat:

    <table class="example-table-result">
        <tr>
            <th> </th>
            <th>Név</th>
        </tr>
        <tr class="background-light-grey">
            <td>
                <input type="checkbox" value="1" />
            </td>
            <td>Név 1</td>
        </tr>
        <tr class="background-light-grey">
            <td>
                <input type="checkbox" value="1" />
            </td>
            <td>Név 2</td>
        </tr>
        <tr class="background-light-grey">
            <td>
                <input type="checkbox" value="1" />
            </td>
            <td>Név 3</td>
        </tr>
    </table>

                    

Az oldal betöltődése után beállítjuk a megfelelő javascriptet. Így:

1. Vesszük a táblázatban szereplő checkboxok közül azt amelyikre rákattintunk
2. Megnézzük, hogy be pipáltuk vagy töröltük a pipát
3. Ha be pipáltuk kiszínezzük a neki megfelelő sort

A kiszínezéshez a legegyszerűbb módszert választjuk, hozzáadunk egy osztályt amelyet már előre megírtunk CSS-ben, és az megadja a hozzá tartozó színt.

Az alábbi javascript segítségével végrehajtjuk a feladatot az előbbi sorrendben.

<script type="text/javascript">
    $( document ).ready(function(){

        $( '.example-table-result input[type="checkbox"]' ).click(function( event ){

            // delete the class which set the green color of selected row
            $( this ).parent().parent().removeClass( "background-light-green" );

            if( $( this ).is( ":checked" ) )
            {
                $( this ).parent().parent().addClass( "background-light-green" );
            }
        })

    });
</script>

                

A javascript végrehajtása után az eredmény az alábbi táblázaton tesztelhető, kattintson rá bármelyik checkbox elemre és pipálja be majd törölje a pipát:
 

A példa és a benne szereplő kódok letölthetőek a jobb oldalon található link segítségével