[Çözüldü] jQuery'de checked radiobuton seçme

[Timur]

Merhabalar,

kendi kendime jQuery öğrenmeye çalışıyorum. Diyelim ki html'de bir table içerisine 3. tane örnek soru var. Her sorunun cevabı için ise 1'den 5'e kadar değerler içeren radiobuton'ları var. butona tıkladıktan sonra seçili olanların değerlerini toplayıp ekrana yazdırmak istiyorum. bütün radio butonları selector ile seçtim fakat bunların arasında "checked" olanların değerlerinin toplamını almak istiyorum. yardımcı olabilirseniz sevinirim.

Bu benim kullandığım table:

Kod Seç Genişlet


    <table style="width:100%;" border="1">
        <tr>
            <td>
                1. soru metni</td>
            <td class="answers">
                <input id="Radio1" name="A1" type="radio" value="1" />1<br />
                <input id="Radio2" name="A1" type="radio" value="2" />2<br />
                <input id="Radio3" name="A1" type="radio" value="3" />3<br />
                <input id="Radio4" name="A1" type="radio" value="4" />4<br />
                <input id="Radio5" name="A1" type="radio" value="5" />5<br />
            </td>
            <td rowspan="3">
                <input id="Button1" type="button" value="topla!" onclick="islem()" /><br />
                sonuç buraya yazılacak</td>
        </tr>
        <tr>
            <td>
                2. soru metni</td>
            <td class="answers">
                <input id="Radio6" name="A2" type="radio" value="1" />1<br />
                <input id="Radio7" name="A2" type="radio" value="2" />2<br />
                <input id="Radio8" name="A2" type="radio" value="3" />3<br />
                <input id="Radio9" name="A2" type="radio" value="4" />4<br />
                <input id="Radio10" name="A2" type="radio" value="5" />5<br />
            </td>
        </tr>
        <tr>
            <td>
                3. soru metni</td>
            <td class="answers">
                <input id="Radio11" name="A3" type="radio" value="1" />1<br />
                <input id="Radio12" name="A3" type="radio" value="2" />2<br />
                <input id="Radio13" name="A3" type="radio" value="3" />3<br />
                <input id="Radio14" name="A3" type="radio" value="4" />4<br />
                <input id="Radio15" name="A3" type="radio" value="5" />5<br />
            </td>
        </tr>
    </table>



Eğer yanılmıyorsam bu kodda da bütün radio buttonları seçmiş oluyorum. Fakat benim kullanıcının "checked" yaptığı  radiobutton'ların değerlerine ihtiyacım var, yardım edebilirseniz çok sevinirim

Kod Seç Genişlet


$(document).ready(function () {
        $("input.answers")
});


[alquirel]

Merhaba,

Öncelikle radio türü form elemanlarını gruplamak için, name özelliğini aynı olacak şekilde ayarlamalısınız.
Mesela ilk sorudaki radio'ların name özelliği "soru1", ikincidekilerinki "soru2", üçüncüdekilerinki de "soru3" olsun.
Böylece bir soru için aynı anda sadece bir adet radio seçilmesini sağlarsınız.

İşin jQuery ayağına gelirsek, bu da jQuery ile çok kolay aslında.

Mesela ilk soruya verilen cevabı bulmak için şunu kullanabilirsiniz :

Kod Seç Genişlet


$("input[name=soru1]:checked").val();


Köşeli parantez ile, herhangi bir özelliği o değerde olan olan elemanları seçeriz. Bizim örneğimizde "name" özelliği "soru1" olan "input" etiketli öğeler oluyor bu. ":checked" ile de işaretli olanları seçeriz. "val" metodu da yazılan seçici ile seçilmiş olan elemanın "value" özelliğine ulaşmış oluruz. Bu yapıyı "soru2" ve "soru3" ile de kullanarak üç adet değeri toplayabilirsiniz.

Sizin verdiğiniz jQuery parçasında, seçilecek olan şey class özelliği "answer" olan herhangi bir form elemanıdır. Ama ne yazık ki sayfanızda böyle bir şey olmadığı için hiçbir şey seçmemiş olursunuz o seçiciyle. Sizin yapmak istediğiniz şey şu şekilde yapılır.

Kod Seç Genişlet


$(":input", $("td.answers"))

Burada da, seçicideki değere uygun elemanların, içinde aranacağı HTML öğesini, virgülden sonra yazarak bir nevi süzgeçlemiş oluyoruz.

Not: "input" yerine ":input" kullanırsanız sadece inputları değil textarea gibi tüm form elemanlarını seçmiş olursunuz.

[Timur]

o zaman direk

Kod Seç Genişlet

$("input[name=soru1]:checked").val(); yazabildiğimize göre

Kod Seç Genişlet

$(":input", $("td.answers")) buradaki seçiciyi kullanmamıza gerek kalmıyor?

[alquirel]

Tabii ki gerek yok, ben sizin yazdığınız seçicinin doğrusunu anlatmış olmak için yazmıştım.

[Timur]

ben sizin gösterdiğinizi şöyle uyarlamaya çalıştım hocam ama yine olmadı 
script'in akışında gözden kaçırdığım birşey var sanırım?

Kod Seç Genişlet


    <script type="text/javascript">
        var total = 0; // burası toplam sonucu tutacak!
        var x, y, z;
        $(document).ready(function () {

            x = $("input [name=soru1]:checked").val();
            y = $("input [name=soru2]:checked").val();
            z = $("input [name=soru3]:checked").val();
        });

        total = x + y + z;

    function islem() {
        alert("toplam = " + total);           
        }
    </script>


[alquirel]

Öncelikle şunu sorayım. Radio'ların name özelliğini dediğim gibi değiştirdiniz mi?

Gerçi bunu yapmış olsanız bile bu en son verdiğiniz betik doğru çalışmaz. Çünkü bu betikle siz, sayfa yüklendiğinde seçili olan radio'ların değerlerini topluyorsunuz. Yani kullanıcı henüz hiçbir şeyi seçemeden siz toplama işlemini yapıyorsunuz. "islem" fonksiyonunun dışında yazdığınız bütün kodları olduğu gibi "islem" fonksiyonunun içine alın. Sonra da bir "button" gibi bir eleman üretip onun "onclick" özelliğine de bu fonksiyonu koyun.

Yani mesela;

Kod Seç Genişlet


<input type="button" onclick="islem();" value="Sonucu Göster" />


[Timur]

radio'ların name özelliğini değiştirmiştim. onclick'te de o fonksiyon vardı zaten. söylediğiniz değişikliği yaptım ama hala çalışmıyor :S

[alquirel]

Kusura bakmayın, gözümden kaçmış.
jQuery'de seçici yazarken boşluk karakteri çok önemlidir, ve bir mana ifade eder. Normal kod yazarkenki gibi cömertçe koyamıyoruz yani boşlukları.
"input" ile "[name=soruX]" yazılarının arasındaki boşlukları kaldırmanız gerekiyor.

[Timur]

Çok teşekkürler hocam, çalıştı şimdi

ama istediğim gibi çalışmadı. 3 sorunun hepsinde de 1 seçeneğini seçip çalıştırdığımda sonu 3 olacağına 111 çıktı :S

[alquirel]

Tabii bunu da söylemem gerekirdi kusura bakmayın.
JavaScript'te "+" işareti sözcükleri (string) yan yana birleştirme görevi görüyor.
Hâliyle "val" metodu ile alınan değerler de string türünde olduğundan 3 yerine 111 çıkıyor.

Bunun önüne geçmek için "eval" fonksiyonunu kullanabilirsiniz.
Yani eval(x+y+z) şeklinde yazarsanız çözüm olur.

[Timur]

Yok hocam, estağfurullah. Tekrar teşekkür ederim yardımlarınız için. eval kullanınca alert'ler çalışmamaya başladı.

sanırım ben en iyisi bugünlük ara verip, yarın yeni bir html sayfası üzerinde bunu tekrar yapmaya çalışacağım. bu dosya çok dağıldı, her yanında comment içerisine alınmış kodlar, notlar vs. oldu iyice

bana jQuery'de yardımcı olabilecek bir kaynak öneriniz var mı? internet üzerinden olursa daha iyi olur ama kitap önerisine de açığım

[alquirel]

Kitap var mı bilmiyorum.
Eğer İngilizce sorununuz yoksa jQuery'nin kendi belgelendirmesi gayet yeterli.

Ne zaman başım sıkışsa ilk adresim burası olur.
http://docs.jquery.com/Main_Page

Alert kısmında engellenen şey ne? Eğer hiç "alert" penceresi çıkmıyorsa muhtemelen evvelinde bir sözdizim hatası olmuştur.
Pencere çıkıyorsa ne yazdığına bakarak sorunun derinine inebiliriz.

[Timur]

bu kod bende işe yaramadı hocam.

Kod Seç Genişlet

total = eval(x + y + z);

sonra bende internetten parseInt'i öğrendim ve şöyle birşey yazdım,

Kod Seç Genişlet

total = (parseInt(x) + parseInt(y) + parseInt(z)); ama sonra eval'i her değer için teker teker kullanmayı denedim bir de, bu kez işe yaradı hocam

Kod Seç Genişlet

total = eval(x) + eval(y) + eval(z);


peki diyelimki ben bir kez cevapları işaretleyip butona tıkladıktan sonra da önceki işaretlemenin sonuçlarına eklemeyi nasıl yapabilirim? mesela önce hepsinde 5 işaretleyip tıkladım sonuç 15, sonra hepsinde 1 işaretleyip tekrar işaretledim, sonuç 3 yerine 18 olsun istiyorum. bunu nasıl yapabiliriz?

[alquirel]

Herhangi bir <script> etiketi arasında herhangi bir değişken tanımladıktan sonra fonksiyon içinde o değişkene ekleme yapabilirsiniz diye düşünüyorum.
Yani total değişkenini islem fonksiyonunun içinde değil dışında tanımlayıp da deneyin.

[Timur]

script'in mevcut hali bu hocam, ama işe yaramadı

Kod Seç Genişlet

<script type="text/javascript">

    $(document).ready(function () {
    });
    total = 0; // burası toplam sonucu tutacak!

    function islem() {
        var x, y, z;

        x = $("input[name=soru1]:checked").val();
        y = $("input[name=soru2]:checked").val();
        z = $("input[name=soru3]:checked").val();
        alert("1. sonuç = " + $("input[name=soru1]:checked").val());
        alert("2. sonuç = " + $("input[name=soru2]:checked").val());
        alert("3. sonuç = " + $("input[name=soru3]:checked").val());

        //total = eval(x + y + z);
        //total = (parseInt(x) + parseInt(y) + parseInt(z));       
        total = eval(x) + eval(y) + eval(z);
        alert("toplam = " + total);
    }
    </script>


[alquirel]

total = 0;

şeklinde değil de

var total = 0;

şeklinde tanımlamayı deneyin bir de.

Zira şu adreste bu şekil ile yapmak istediğimize ulaşılmış.
http://snook.ca/archives/javascript/global_variable

Daha fazla arama yapmak isterseniz "javascript" "global" "variable" kelimeleriyle arama yapabilirsiniz.

[Timur]

"var" kısmı dikkatimden kaçmış. şimdilik olmadı, ama ben biraz araştırıp, üzerinde uğraşıyım bunun. tekrar teşekkürler hocam, sağolun.

[Timur]

global variable tam olarak istediğimi yapmadı hocam, sanırım başka bir js dosyası içerisinde her butona tıkladıktan sonra toplamı o diğer dosyadaki değerle toplamak en uygun çözüm şimdilik. başlığı kapatabilirisiniz, çok teşekkürler 

[alquirel]

O halde harici bir dosya kullanmak yerine Cookie kullanmanızı tavsiye ederim.