De- And Activating A Checkbox In A Table Doesn't Work

If the user clicks activates the check box the value should be changed from false into true. I tried it but it works here but not locally and I don't know why :/ Maybe someone know

Solution 1:

This should work :)

     $(document).ready(function(){
        window.onload = function() {
          var allArtists = [];
        
        
          $('#submit').click(function() {
            var $rowTemplate = $('<tr><td data-id="id"></td><td data-id="name"></td><td data-id="geburtsort"></td><td data-id="geburtsdatum"></td><td data-id="favorite"></td></tr>');
        
            var artistName = $("#name").val();
            var ort = $("#ort").val();
            var datum = $("#datum").val();
            var favourite = $("[name=Favorit]").is(':checked');
        
          if(artistName!= "" && ort != "" && datum != ""){
              
            allArtists.push([artistName, ort, datum]);
        
            var rowId = allArtists.length;
        
            $rowTemplate.find('[data-id=id]').text(rowId);
            $rowTemplate.find('[data-id=name]').text(artistName);
            $rowTemplate.find('[data-id=geburtsort]').text(ort);
            $rowTemplate.find('[data-id=geburtsdatum]').text(datum);
            var checked = favourite ? "checked" : "";
          
            $rowTemplate.find('[data-id=favorite]').html('<div class="chkText">'+favourite+'</div>').append($('<input type="checkbox" id="fave" ' + checked + '>'));
          
            $("#table tbody").append($rowTemplate);
          }
          });
        };
        
        $("#chkid").on('change',function(){ 
          $(this).prev('div').text($(this).is(":checked"));
        });
        
        functionmyFunction() {
            var input, filter, table, tr, td, i;
            input = document.getElementById("myInput");
            filter = input.value.toUpperCase();
            table = document.getElementById("table");
            tr = table.getElementsByTagName("tr");
        
            // Loop through all table rows, and hide those who don't match the search queryfor (i = 0; i < tr.length; i++) {
              td = tr[i].getElementsByTagName("td")[1];
              if (td) {
                if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
                  tr[i].style.display = "";
                } else {
                  tr[i].style.display = "none";
                }
              }
            }
          }
          
   


       });

<divid="layout"><h1>Künstler hinzufügen</h1><formid="send"><label>Name des Künstlers</label><br><inputid="name"type="text"placeholder="Name des Künstlers" /><br><label>Ort</label><br><inputid="ort"type="text"placeholder="Woher stammt der Künstler" /><br><label>Geburtsdatum</label><br><inputid="datum"type="text"placeholder="Wann ist der Künstler geboren?" /><br></form><p><inputtype="checkbox"id="chkid"name="Favorit"value="Favorit">Favorit
    <p><inputtype="button"id="submit"name="senden"value="Senden"><inputtype="text"id="myInput"onkeyup="myFunction()"placeholder="     Search for names.."><tableid="table"><tbody><tr><th>ID</th><th>Name</th><th>Geburtsort</th><th>Geburtsdatum</th><th>Favorit</th></tr></tbody></table></div>