Question

我正在使用jQuery和Bootstrap创建一个基本的应用程序。这是我写的当前代码。我成功地将用户输入动态添加到＆＃34; To Do＆＃34;带有以下jQuery的部分：

＆＃13;

    let toDoArr = [];
    
    $('#addItemBtn').click(() => {
	    let item = $('#searchInput').val();
	    toDoArr.push(item);
	    $('#toDoList').append('<tr><td class="listText"><label for=' + item + '>' + item + '</label><input type="checkbox" value=' + item + '></td></tr>');
	    $('#searchInput').val('');
    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="container">

		<h1 class="center">To Do List</h1>

		<div class="row">
			<div class="col-sm-4 col-sm-offset-4">
				<div class="input-group">
						<input type="text" class="form-control" id="searchInput" placeholder="Add a new item">
						<span class="input-group-btn">
							<button type="button" class="btn btn-success" id="addItemBtn">Add</button>
						</span>
				</div><!-- ./input-group -->
			</div> <!-- ./col-sm-4 col-sm-offset-4 -->
		</div><!-- ./row -->

		<div class="row">

			<div class="col-sm-6">
				<h3 class="center">To Do:</h3>
				<table class="table table-striped">
					<tbody id="toDoList">
					 <!-- Items added here -->
					</tbody>
				</table>
			</div> <!-- ./col-sm-6 -->

			<div class="col-sm-6">
				<h3 class="center">Completed:</h3>
				<table class="table table-striped">
					<tbody id='completedItems'>
						<div id='log'></div>
						<!-- COMPLETED ITEMS TO BE ADDED -->
					</tbody>
				</table>
			</div> <!-- ./col-sm-6 -->

		</div> <!-- ./row -->
	</div> <!-- ./container -->

    <div class="container">

		<h1 class="center">To Do List</h1>

		<div class="row">
			<div class="col-sm-4 col-sm-offset-4">
				<div class="input-group">
						<input type="text" class="form-control" id="searchInput" placeholder="Add a new item">
						<span class="input-group-btn">
							<button type="button" class="btn btn-success" id="addItemBtn">Add</button>
						</span>
				</div><!-- ./input-group -->
			</div> <!-- ./col-sm-4 col-sm-offset-4 -->
		</div><!-- ./row -->

		<div class="row">

			<div class="col-sm-6">
				<h3 class="center">To Do:</h3>
				<table class="table table-striped">
					<tbody id="toDoList">
					 <!-- Items added here -->
					</tbody>
				</table>
			</div> <!-- ./col-sm-6 -->

			<div class="col-sm-6">
				<h3 class="center">Completed:</h3>
				<table class="table table-striped">
					<tbody id='completedItems'>
						<div id='log'></div>
						<!-- COMPLETED ITEMS TO BE ADDED -->
					</tbody>
				</table>
			</div> <!-- ./col-sm-6 -->

		</div> <!-- ./row -->
	</div> <!-- ./container -->

＆＃13;

此代码成功添加了项目，但出于某种原因，我无法使用复选框获取所选项目。我已经尝试了$('input[type=checkbox]').click(function() { $('input:checked') ... }以及其他许多变体，甚至尝试在选中复选框时让页面提醒，但无济于事。

我假设自动检测到如果勾选了复选框并添加了“检查”＃39;但是，我想知道是否因为如果该功能中断而动态添加它？

最后，我希望在完成后（也就是选中复选框时）将项目移动到＆＃34;已完成＆＃34;以与上面类似的动态方式部分，同时从toDoArr拼接项目并将其推入新数组（我可以这样做）。为什么我无法获取带有选中复选框的项目？

动态地向表添加项目，想要选中已选中的复选框并移动

0 个答案: