Find Way Out

jQuery je JavaScript framework koji u velikoj mjeri može da pojednostavi JavaScript kodiranje bez da razmišljate o kompatibilnosti browser-a.
Jedna od prednosti jQuery-ja jednostavnost manipulacije elementima i njihovim atributima. U ovom postu ću, na jednostavan način, da pokažem neke od mogućnosti jQuery-ja.

Uzmimo element checkbox  i manipulišimo njegovim atributom checked.
Ovo je HTML kod jednostavne forme sa dva checkbox-a i dva dugmeta.

        <form name="myform" id="myform" action="javascript:void(null)">
            <input type="checkbox" id="preview" name="preview" value="1" /> Preview.<br />
            <input type="checkbox" id="sendresponse" name="sendresponse" value="1" /> Send response.<br /> <br />
            <input type="button" id="checkall" value="Check all" />
            <input type="button" id="uncheckall" value="UnCheck all" />
        </form>

Cilj nam je da klikom na dugme CheckAll svi checkbox-ovi postanu označeni, a klikom na dugme UnCheckAll postanu neoznačeni.

Ovo je kompletan jQuery kod:

            jQuery(document).ready(function(){
                // check all
                $('#checkall').click(function(){
                    $('#myform input:checkbox').each(function(){
                        $(this).attr('checked', true);
                    });
                });
                // uncheck all
                $('#uncheckall').click(function(){
                    $('#myform input:checkbox').each(function(){
                        $(this).attr('checked', false);
                    });
                });
            });

Prođimo kroz ovaj kod korak po korak:

1. Ovim kodom jQuery provjerava document i ceka da on bude spreman za manipulisanje.

$(document).ready(function(){

});

2. Dodajemo event click na dugme čiji je id checkall

                $('#checkall').click(function(){

                });

3. Unutar event-a click pomoću selector-a označimo sve checkbox-ove unutar forme čiji je id myform.
To ćemo učiniti pomoću ovog koda:

                    $('#myform input:checkbox').each(function(){

                    });

4. Sada nam samo ostaje da označimo svaki checkbox što ćemo da učinimo na sljedeći način:

$(this).attr('checked', true);

Ovaj kod bi mogao da se napiše na drugi način, kao recimo:

$(this).attr('checked','checked');

I obavljao bi istu funkciju kao i prethodni kod.
5. Da bismo osposobili dugme UnCheckAll koristićemo isti kod koji smo koristili za CheckAll dugme s tim što ćemo da napravimo sljedeću izmjenu:

$(this).attr('checked', true);
// prelazi u
$(this).attr('checked', false);

Ovaj dio koda bi takođe mogao da se napiše na drugi način i to kao:

$(this).attr('checked','');

I to je to, jednostavno i lako

Kod radi na testiranim browser-ima:

• Chrome 5.0.342.3
• Mozilla Firefox 3.6
• Opera 10.50 Beta
• Internet Explorer 8.0
• Safari 4.0.4

Demo