표 및 배열의 ​​확인란을 비활성화하고 활성화하는 방법

Question

사용자가 확인란을 클릭하면 배열 값을 변경하는 방법을 알고 있습니까?

기본적으로 3 개의 텍스트 필드 (이름, 날짜, 장소)와 체크 박스 (즐겨 찾기)가 있습니다. 사용자가 무언가를 삽입하고 버튼을 클릭하면 표의 데이터가 표시되고 배열에도 데이터가 저장됩니다.

내 질문은 : "true"(선택됨) 값을 "false"로 변경하여 사용자가 "사람"을 즐겨 찾기로 설정 해제하고 활성화 할 수있는 방법은 무엇입니까?

Answer 1

favoriteboolean 값을 기준으로 checkbox에 체크 표시를하십시오. attribute 이 그대로 가질 수없는 곳 table에 rows을 추가하는 동안

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>

, 당신은 동적 html 세대 여기 id 중복 작성하는 메모를 확인하시기 바랍니다 javascript 섹션에서 코멘트 읽기 duplicate id in html