Question

如果用户点击了复选框，有人知道如何更改数组的值吗？

基本上我有3个文本字段（名称，日期，地点）和一个复选框（收藏夹）。如果用户插入某些内容并单击该按钮，您将看到下表中的数据，并且数据也将保存在数组中。

我的问题是：如何将值“true”（已选中）更改为“false”，以便用户可以选择取消激活“人物”作为收藏？

Answer 1

只需根据您的attribute checkbox值将已检查的favorite添加到boolean。阅读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>

请注意您在动态id代中创建了重复的html，同时将rows添加到table，因为不允许在duplicate id

中拥有html

如何取消激活表格中的复选框以及数组中的复选框

1 个答案: