テーブルや配列のチェックボックスを解除して有効にする方法

Question

ユーザーがチェックボックスをクリックした場合、配列の値を変更する方法を知っていますか？

私は基本的に3つのテキストフィールド（名前、日付、場所）とチェックボックス（お気に入り）を持っています。ユーザーが何かを挿入してボタンをクリックすると、表のデータが表示され、データも配列に保存されます。

質問：「true」（チェックされている）の値を「false」に変更すると、ユーザーは「人」をお気に入りとしてアクティブ化したりアクティブ化したりすることができますか？

Answer 1

favoritebooleanの値に基づいて、のいずれかをチェックしてください。checkboxに追加してください。 javascriptセクション

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'); 
 

 
    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" : ""; 
 
    //if favourite==true then add checked value to checked variable otherwise keep it empty 
 

 
    $rowTemplate.find('[data-id=favorite]').html('<div class="chkText">'+favourite+'</div>').append($('<input type="checkbox" id="fave" ' + checked + '>')); 
 
    //just assign it as property to your checkbox. 
 

 
    $("#table tbody").append($rowTemplate); 
 
    }); 
 
}; 
 

 
$("#table").on('change','input[type=checkbox]',function(){ 
 
    $(this).prev('div').text($(this).is(":checked")); 
 
});

.chkText{ 
 
    float:left; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<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" name="Favorit" value="Favorit">Favorit 
 
    <p> 
 

 
    <input type="button" id="submit" name="senden" value="Senden"> 
 
    <table id="table"> 
 
     <tbody> 
 
     <tr> 
 
      <th>ID</th> 
 
      <th>Name</th> 
 
      <th>Geburtsort</th> 
 
      <th>Geburtsdatum</th> 
 
      <th>Favorit</th> 
 
     </tr> 
 
     </tbody> 
 

 

 
    </table>

のコメントを読むことが持つことが許されていないとしてtableどこへrowsを追加しながら、あなたが、あなたのダイナミックhtml世代でここidを複製作成するメモしてくださいduplicate id in html