İlçeleri checkbox için de listeletmek | Cevap #10332

merhabalar select için de il ve ilçe listelettiriyorum
Örnek : https://codepen.io/ebykdrms/pen/zYRJKmw
benim yapmak istediğim ilçeleri checbox için de listeletip istediği kadar seçtirmek bunu nasıl yapabilirim

<section>
  <select class="field__input" id="Iller" name="sehir">
     <option value="0" disabled selected>İl seçiniz...</option>
  </select>
  <select class="field__input" id="Ilceler" name="ilce" disabled>
     <option value="0" disabled selected>İlçe seçiniz...</option>
  </select>
  <button data-role="save" disabled>Kaydet</button>
</section>

function setSelectBoxes(selectedData) {
  $("select[name=sehir]").val(selectedData.plaka).trigger("change");  
  $("select[name=ilce]").val(selectedData.ilce).trigger("change");
}

var data = [
  {
    "il": "Adana",
    "plaka": 1,
    "ilceleri": [
      "Aladağ",
      "Ceyhan",
      "Çukurova",
      "Feke",
      "İmamoğlu",
      "Karaisalı",
      "Karataş",
      "Kozan",
      "Pozantı",
      "Saimbeyli",
      "Sarıçam",
      "Seyhan",
      "Tufanbeyli",
      "Yumurtalık",
      "Yüreğir"
    ]
  },
  {
    "il": "Samsun",
    "plaka": 55,
    "ilceleri": [
      "19 Mayıs",
      "Alaçam",
      "Asarcık",
      "Atakum",
      "Ayvacık",
      "Bafra",
      "Canik",
      "Çarşamba",
      "Havza",
      "İlkadım",
      "Kavak",
      "Ladik",
      "Salıpazarı",
      "Tekkeköy",
      "Terme",
      "Vezirköprü",
      "Yakakent",
    ]
  }
]

$(document).ready(function(){
  const $sehir_select = $("select[name=sehir]");
  const $ilce_select = $("select[name=ilce]");
  const $save_button = $("button[data-role=save]");
  
  $sehir_select.find("option").eq(0).siblings().remove();
  for(let i=0; i<data.length; i++){
    $sehir_select.append(`<option value="${data[i].plaka}">${data[i].il}</option>`);
  }
  
  $sehir_select.on("change",function(){
    const target = $(this).val();
    const targetData = data.find(function(x){return x.plaka==target});
    if(!targetData) { alert("Bu ile ait ilçe kaydı bulunamadı."); return; }
    $ilce_select.find('option').eq(0).prop("selected",true).siblings().remove();
    $save_button.prop("disabled",true);
    for(let i=0; i<targetData.ilceleri.length; i++) {
      $ilce_select.append(`<option value="${targetData.ilceleri[i]}">${targetData.ilceleri[i]}</option>`);
    }
    $ilce_select.prop("disabled",false);
  });
  
  $ilce_select.on("change", function(){
    const selectedSehir = $sehir_select.val();
    const selectedIlce = $(this).val();    
    if(selectedIlce && selectedIlce!="0") $save_button.prop("disabled",false);
  })
  
   // Seçim yaptıralım.
  var selectedData = {
    il: "Adana",
    plaka: 1,
    ilce: "Ceyhan"
  };
  setSelectBoxes(selectedData);
  
})

Bu şekil de div içine yazdırabiliyorum ama devreye <input type="checkbox"> girince sadece inputu çoğaltıyor veriyi vermiyor
sade bir şekil de <input> yazarsam veriyi yazıyor yardımlarınızı bekliyorum

<div class="field__wrap" id="Ilceler" >Önce İl Seçiniz</div>

function search(nameKey, myArray){
    for (var i=0; i < myArray.length; i++) {
        if (myArray[i].plaka == nameKey) {
            return myArray[i];
        }
    }
}
$( document ).ready(function() {
  $.each(data, function( index, value ) {
    $('#Iller').append($('<option>', {
        value: value.plaka,
        text:  value.il
    }));
  });
  $("#Iller").change(function(){
    var valueSelected = this.value;
    if($('#Iller').val() > 0) {
      $('#Ilceler').html('');
      $('#Ilceler').append($('<div>', {
        value: 0
      }));
      $('#Ilceler').prop("disabled", false);
      var resultObject = search($('#Iller').val(), data);
      $.each(resultObject.ilceler, function( index, value ) {
        $('#Ilceler').append($('<div>', {
            value: 0,
            text:value
        }));
      });
      return false;
    }
    $('#Ilceler').prop("disabled", true);
  });
});