ToDoList的jQuery写法，快来看看吧

ToDoList使用jq编写

• html

<input type="text" class="sendBtn">
		<h2>未完成</h2>
		<ul class="list1">
			<!-- <li> 
				<input type="checkbox" name="" id="" value="" />
				<span id="">
					吃饭
				</span>
				<button type="button">删除</button>
			</li> -->
		</ul>

		<h2>已完成</h2>
		<ul class="list2">
			<!-- <li> 
				<input type="checkbox" name="" id="" value="" checked="checked"/>
				<span id="">
					睡觉
				</span>
				<button type="button">删除</button>
			</li> -->
		</ul>

• js代码

let sendBtn = $('.sendBtn');
			let arr = [
				// status true 表示已完成
				{
					name: '看电视',
					status: false
				},
				{
					name: '玩游戏',
					status: true
				},
			];
			render()
			//发送按钮 
			sendBtn.change(function(){
				let name = sendBtn.val();
				let obj = {
					name: name,
					status: false
				};
				arr.push(obj);
				render()
			})
			//根据数据 arr  渲染页面 产生页面
			function render() {
				let list1 = $('.list1')
				let list2 = $('.list2')

				//拼字符串
				let list1Html = '';
				let list2Html = '';
				for (let i = 0; i < arr.length; i++) {
					let obj = arr[i];
					if (obj.status == false) {
						list1Html +=
							`
						<li>
							<input type="checkbox" name="" id="" value="" data-name="${obj.name}"/>
							<span id="">
								${obj.name}
							</span>
							<button type="button" class="dBtn" data-name="${obj.name}">删除</button>
						</li>
						`
					} else {
						list2Html +=
							`
						<li>
							<input type="checkbox" name="" id="" value="" checked="checked" data-name="${obj.name}"/>
							<span id="">
								${obj.name}
							</span>
							<button type="button" class="dBtn" data-name="${obj.name}">删除</button>
						</li>
						`
					}

				}
				
				list1.html(list1Html)
				list2.html(list2Html)
				//删除按钮
				$('.dBtn').click(function(){
					console.log(11)
					let name = $(this).attr('data-name');
					arr = arr.filter(v=>v.name !== name)
					render()
				})
				
				//修改按钮
				$('input[type=checkbox]').change(function(){
					////点击的是 未完成的列表
						//修改数组对应的元素的 属性值, 然后渲染页面
					let name = $(this).attr('data-name')
					let obj = arr.find(v=>v.name === name);
					console.log(obj)
					obj.status = this.checked;
					render()
				})
			}

• 如果你想了解该文章代码的实现过程，请翻看我的另一篇todolist文章，上面有代码思路。