Duyuruyu Kapat
Facebook Gözat
Twitter Gözat

checkbox listesinde farketmez veya tümü seçilirse

Konu, 'Javascript' kısmında sedirAğacı tarafından paylaşıldı.

  1. sedirAğacı

    sedirAğacı Daimi Üye

    Kayıt:
    2 Mart 2016
    Mesajlar:
    897
    Beğenilen Mesajlar:
    237
    Meslek:
    Bilgisayar programcısı.
    Şehir:
    Aydın
    Çok seçmeli bir açılır listeye ihtiyacım oldu. Dünden beri onunla uğraşıyordum.
    Bu arada checkbox list de ilk seçenek tümü yada farketmez olursa, ilk seçenek seçildiğinde diğerlerini silecek bir fonksiyon yazmam gerekti.
    Onu paylaşayım, ihtiyacı olan olur.:cool:

    HTML:
    <!DOCTYPE html>
    <HTML>
    <HEAD>
    </HEAD>
    <BODY>
    farketmez tıklanırsa, diğerlerini sil.
    <br /><br /><br />
    
        <div style="padding: 4px; border: 1px solid darkslateblue; background-color: #efefef; width: 300px;">
            <input id="chbxl_0Durum_0" type="checkbox" class="checkGroup" value="11" onchange="chbxAction(this.id, this.checked)" checked="true" />farketmez
            <br />
            <input id="chbxl_0Durum_1x" type="checkbox" class="checkGroup" value="22" onchange="chbxAction(this.id, this.checked)" />22
            <br />
            <input id="chbxl_0Durum_x2" type="checkbox" class="checkGroup" value="33" onchange="chbxAction(this.id, this.checked)" />33
            <br />
            <input id="chbxl_0Durum_3xx" type="checkbox" class="checkGroup" value="44" onchange="chbxAction(this.id, this.checked)" />44
        </div>
    
    
    
    <script>
    /*
        checkbox listeler için geçerli. İlk seçenek tümü yada Farketmez olan listeler için kullanılabilir.
        Farketmez seçilirse diğerlerini false yapar, diğerlerinden biri seçilirse Farketmez seçeneğini false yapar.
        Item sınırı yok.
        Farketmez seçeneğinin sonu mutlaka _0 olmalı. Diğerleri önemli değil, id lerinde en az 1 tane _ işareti olsun yeter.
        örnek chbx_0, chbx_a, chbx_mn_xcy, chbxKL_99z,... gibi. İlk ID nin sonu sıfır olacak.
        Örnek çağrı : chbxAction(this.id, this.checked)
    */
        function chbxAction(myInputID, myChecked) {
            try {
                const myI = myInputID.lastIndexOf("_");
                const myInd = myInputID.substr(myI + 1, 1);         // index no : ID nin sondaki rakam kısmını alıyoruz. örnek: "chbxKonular_1" -> "1"
                myInputID = myInputID.substring(0, myI);             // ID nin ortak olan kök kısmını alıyoruz. örnek: "chbxKonular_1" -> "chbxKonular"
    
                // ilk seçeneğe (+)tıklanmışsa, geri kalanın tikini kaldır. Diğerlerinden birine tıklanmışsa(+), ilk seçeneğin tikini kaldır.
                if (myInd == "0") {
                    // Farketmez seçeneğine tıklanmış. Checked veya unChecked olabilir.
                    if (myChecked) clearChbxItems(myInputID);      // tüm diğer tikleri kaldır.
                }
                else
                {
                    // Farketmez den sonraki bir seçeneğine tıklanmış. Checked veya unChecked olabilir.
                    if (myChecked) document.getElementById(myInputID + "_0").checked = false;           // Farketmez seçeneğinin tikini kaldır.
                }
              
            } catch (e) {
                alert(e.message);
            }
        }
        // chbx list de, ilk seçenek hariç diğer seçeneklerin tikini kaldır.
        //  ilk seçeneğin ID sinin _0 ile bitmesi gerekir
        function clearChbxItems(myInputID) {
            try {
                var myInput = document.getElementsByTagName("input");
                if (myInput != null) {
                    for (var ii = 0; ii < myInput.length; ii++) {
                        if (myInput[ii].type === 'radio' || myInput[ii].type === 'checkbox') {
                            let chbxID = myInput[ii].id;
                            if (chbxID.indexOf(myInputID) > -1) {
                                const myI = chbxID.lastIndexOf("_");
                                const myInd = chbxID.substr(myI + 1, 1);         // index no : ID nin sondaki rakam kısmını alıyoruz. örnek: "chbx_0_Konular_0" -> "0"
                                if (myInd != "0") myInput[ii].checked = false;
                            }
                        }
                    }
                }
                else {
                    alert("Nesne alınamadı.");
                }
            } catch (e) {
                alert(e.message);
            }
        }
    
    </script>
    
    </BODY>
    </HTML>
    Aslında js diline hakim olsaydım, çok seçmeli bir açılır listeyi nesne olarak yazardım. her yerde kullanırdım.
    Çok fazla kişi bu tür liste kullanıyor ama HTML de kaç versiyon oldu bu tür bir nesne eklemediler. Tabi yanlış biliyorda olabilirim, çok hızlı değişiyor herşey, yetişemiyorum. o_O
     
    Son düzenleme: 26 Şubat 2018
    Yilmazx ve dinlex bunu beğendi.
  2. sedirAğacı

    sedirAğacı Daimi Üye

    Kayıt:
    2 Mart 2016
    Mesajlar:
    897
    Beğenilen Mesajlar:
    237
    Meslek:
    Bilgisayar programcısı.
    Şehir:
    Aydın
    dünya nereye gidiyor daki yazılarıma katlandığınız için, dropDown haline getirdiğim checkboxlist ide burada paylaşayım.

    Yukardaki checkbox listeyi, popUp içine koydum, renklendirip birde ok animasyonu koydum. Güzel oldu.
    3 browserda denedim, sorun yok.
    Yanlız element ve değişken isimlendirmelerini ve yöntemi biraz garipseyebilirsiniz.
    Sebebi bu yapıyı asp.NET içinde kullanacağım için, onun anlayacağı şekilde yaptım. Ama her yapıdada çalışır. asp için olmasa, kod miktarı üçte bir oranında azalabilirdi.

    Buyrun efendim, istediğiniz gibi renklendirin, uyarlayın kullanın. Serbest. free...
    Tabi ben dışardan aldığım her kodun, eğer kodun %60 den fazlası bana ait değilse, sahibinin adını fonksiyon yada dosya üzerine koyup öyle kullanıyorum. Saygımdan dolayı.
    Sizde bu kodları, internet dünyasında beni temsil eden adlardan birini koyarak kullanabilirsiniz.:)
    tavukluPilav,
    boabab,
    sedirAğacı,
    Ali Can...
    :rolleyes:

    HTML:
    <!DOCTYPE html>
    <HTML>
    <HEAD>
    
    <style>
    
    .ddlMulti {position: relative; display: inline-block; z-index: 14000; }
    .ddlMultiBt {background-color: darkgreen; color: white; cursor: pointer; padding: 6px; display: block; border: 2px solid silver;}
    .spnRotateOk {padding: 0px; float: right; display: inline; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out 0s;}
    .okAsagi4ddl:before { content: "\276F"; color: white; float: right;  transform: rotate(90deg); transform-origin: center; vertical-align: middle; }
    .ddlMulti-content { display: none; position: absolute; background-color: #f8f8f8; color: darkslategrey; min-width: 240px; overflow: auto; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);}
    .displayNone {display: none;}
    .tblBoBt_g { width: 90%; border-collapse: collapse; margin: 10px 10px 20px 10px; }
    .tblBoBt_g td { padding: 4px; border-bottom: 1px solid #e6e0dc; }
    .tblW100 { width: 100%; }
    .rotate180 {transform: rotate(180deg); -webkit-transform: rotate(180deg); -moz-transform: rotate(360deg);}
    
    
    </style>
    
    </head>
    <body style="padding: 20px; font-size: 12px; font-family: Arial; ">
    
    <table>
    <tr>
        <td style="width: 600px;">
            <div id="dvDdlMulti1"  class="ddlMulti" style="background-color: #efefef;">
                <table style="width: 200px;">
                <tr>
                    <td>
                        <div id="dvDdl" onclick="setDdlMulti('dvDdlMultiPopUp', 'spnArrow')" class="ddlMultiBt">cinsiyet seç
                            <span id="spnArrow" class="spnRotateOk okAsagi4ddl">&nbsp;</span>
                        </div>
                    </td>
                </tr>
                </table>
                <div id="dvDdlMultiPopUp" class="ddlMulti-content displayNone">
                    <table id="chbxl_Gender" class="tblBoBt_g">
                    <tr>
                        <td>
                            <span onchange="chbxAction('chbxl_Gender_0')">
                                <input id="chbxl_Gender_0" type="checkbox" name="chbxl_Gender_0" tabindex="1" value="Farketmez" checked="true"/> &nbsp; <label for="chbxl_Gender_0">Farketmez</label>
                            </span>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <span onchange="chbxAction('chbxl_Gender_1')">
                                <input id="chbxl_Gender_1" type="checkbox" name="chbxl_Gender_1" tabindex="2" value="erkek" /> &nbsp; <label for="chbxl_Gender_1">Erkek</label>
                            </span>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <span onchange="chbxAction('chbxl_Gender_2')">
                                <input id="chbxl_Gender_2" type="checkbox" name="chbxl_Gender_2" tabindex="3" value="dişi" /> &nbsp; <label for="chbxl_Gender_2">Dişi</label>
                            </span>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <span onchange="chbxAction('chbxl_Gender_3')">
                                <input id="chbxl_Gender_3" type="checkbox" name="chbxl_Gender_3" tabindex="3" value="Kurumsal hesap" /> &nbsp; <label for="chbxl_Gender_3">Kurumsal hesap</label>
                            </span>
                        </td>
                    </tr>
                    </table>          
                </div>
            </div>
    
        </td>
    </tr>
    </table>
    
    </BODY>
    </HTML>
    
    
    <script type="text/javascript">
    
    
    function setDdlMulti(fDropDiv, g_spnArrowID) {
        document.getElementById(g_spnArrowID).classList.toggle("rotate180");// arrow up-down anim
        if (document.getElementById(g_spnArrowID).classList.toString().indexOf("rotate180") == -1) {
            elemClose(fDropDiv);
        } else {
            elemDisplay(fDropDiv);
        }
    }
    function chbxAction(myInputID) {
        const myI = myInputID.lastIndexOf("_");
        const myInd = myInputID.substr(myI + 1, 1);
        myInputID = myInputID.substring(0, myI);
        if (myInd == "0") {
            clearChbxItems(myInputID);                                              // tüm diğer tikleri kaldır.
        } else {
            document.getElementById(myInputID + "_0").checked = false;              // ilk seçeneğin tikini kaldır.
        }
    }
    function clearChbxItems(myInputID) {
        var myTargetElem = document.getElementById(myInputID);
        var myInput = myTargetElem.getElementsByTagName("input");
        if (myInput != null) {
            for (var ii = 0; ii < myInput.length; ii++) {
                if (myInput[ii].type === 'radio' || myInput[ii].type === 'checkbox') {
                    let chbxID = myInput[ii].id;
                    if (chbxID.indexOf(myInputID) > -1) {
                        const myI = chbxID.lastIndexOf("_");
                        const myInd = chbxID.substr(myI + 1, 1);
                        if (myInd != "0") myInput[ii].checked = false;
                    }
                }
            }
        }
    }
    function elemDisplay(myObjID) {
        try {
            document.getElementById(myObjID).style.visibility = "visible";
            document.getElementById(myObjID).style.display = "block";
        } catch (e) { }  
    }
    function elemClose(myObjID) {
        try {
            document.getElementById(myObjID).style.display = 'none';
        } catch (e) { }
    }
    
    
    
    
    </script>
    
     
    Son düzenleme: 28 Şubat 2018
    dinlex bunu beğendi.
  3. sedirAğacı

    sedirAğacı Daimi Üye

    Kayıt:
    2 Mart 2016
    Mesajlar:
    897
    Beğenilen Mesajlar:
    237
    Meslek:
    Bilgisayar programcısı.
    Şehir:
    Aydın
    Ekran Alıntısı.PNG
     
    dinlex bunu beğendi.