使用复选框和提交按钮更新对象值

时间:2016-12-14 21:51:26

标签: jquery html

您好我正在开发一个迷你项目,它将向数组中添加对象并将其显示在html中的表中。

我有每个行/对象的单选按钮。如果选中复选框,我想更新我的密钥值。

<div class="container">
    <input id="list-input" />
    <select id="select-status">
        <option value="on-going">on-going</option>
        <option value="completed">completed</option>
    </select>
    <button id="add">Add To List</button>
    <button id="update">Mark as Complete</button>
</div>
<div class="container">
    <h1>Your List</h1>

    <div>
        <table id="mylist">
            <thead>
                <th>ID Number</th>
                <th>Description</th>
                <th>Status</th>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
    <button id="clear">clear</button>
</div>

jsfiddle code

我想在我的数组和html中标记状态是否完整。 真的很感谢上面的帮助

1 个答案:

答案 0 :(得分:1)

此代码遍历每一行,检查其复选框,然后在检查时更新表和数组。

$('#update').on('click', function() {
  var rows = $("#mylist tbody tr");

  $.each(rows, function(i, row) {
      if( $(this).find('td').eq(3).find("input").is(":checked") ) {
          $(this).find('td').eq(2).text("complete");
          tasks[i].status = "complete";              
      }
  });

  // This console.table is here so you can see that the array is updated.
  // You can remove it when you are satisfied this works.
  console.table(tasks);  

});