取消激活表格中的复选框并不起作用

时间:2016-11-25 09:16:19

标签: javascript jquery html

如果用户点击激活复选框,则应将值从false更改为true。

我试了但是它在这里工作但不在本地,我不知道为什么:/

也许有人知道它为什么不在本地工作

1 个答案:

答案 0 :(得分:0)

这应该有效:)

     $(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"));
        });
        
        function myFunction() {
            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 query
            for (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";
                }
              }
            }
          }
          
   


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