最终效果

思维导图

数据类型

定义一个数组

    todo:[{value:"起床",checked:true},
          {value:"吃早饭",checked:true},
          {value:"睡觉",checked:false},
          {value:"吃午饭",checked:false},
        ]

其中的value值表示计划，checked表示是否被勾选上。

第一步——实现输入框，添加数据

  <view class="add-list">
    <!-- 使用变量的保存 -->
    <input  type="text" auto-focus placeholder="你想要做什么？" bindinput="bindKeyInput" />
    <button class="btn" bindtap="add">添加</button>
  </view>

使用 bindinput 用来监听每次输入的值，然后通过 e.detail.value ，来获取到输入的值，然后将值赋给todolist_one (这个用来保存每一个次输入的值)

  bindKeyInput(e){
    this.setData ({
      todolist_one:e.detail.value
    })
    //console.log(e.detail.value)
  },

当点击添加的时候，触发 add 函数，将输入的文本，放到数组中

  add(e){
    var todo = this.data.todo
        // 定义一条新输入,未勾选
    var one = {value:'',checked:false}
    // 不为空的时候才可以添加
    if(this.data.todolist_one !== ''){
      one.value = this.data.todolist_one
      todo.unshift(one) //添加想要的字段
      this.setData({
        todolist_one:'', //将之前的清除
        todo:todo
      })
    }
    console.log(this.data.todo)
  },

这样子的话，就完成了，输入的数据的添加了

通过 wx:for 来将数据展示出来，其中 item.value 表示每次要做的事情， item.checked 表示每次是否被勾选上

  <view>
    <!-- 使用for循环遍历数组 -->
    <checkbox-group bindchange="mark">
      <view class="add-list" wx:for="{{todo}}" value="{{todolist_one}}" wx:key="{{item.value}}">
        <checkbox value="{{item.value}}" checked="{{item.checked}}"></checkbox>
        <view wx:if="{{item.checked == true}}" style="text-decoration:line-through;color:blue;float:left">{{item.value}}</view>
        <view wx:else>{{item.value}}</view>
        <!-- 通过data-index来传递参数 -->
        <button class="btn" bindtap="delete" data-index="{{index}}">删除</button>
      </view>
    </checkbox-group>
  </view>

第二步——实现删除数据

这里的话，需要将对应的数组的下标数，给函数接收，这里的话，使用了 data-index 用来传递参数，函数可以通过 e.currentTarget.dataset.index 来获取到对应的下标，获取到后，通过数组的操作进行删除即可。

<button class="btn" bindtap="delete" data-index="{{index}}">删除</button>

  delete(e){
    // 接收对应数组数目的参数
    var index = e.currentTarget.dataset.index
    var todo = this.data.todo
    // 对数组进行操作,删除对应的list
    todo.splice(index,1)
    // console.log(todolist)
    this.setData({
      todo:todo
    })
    // console.log(e.currentTarget.dataset.index)
  },

第三步——实现划掉数据

        <checkbox value="{{index}}" checked="{{item.checked}}"></checkbox>
        <view wx:if="{{item.checked == true}}" style="text-decoration:line-through;color:blue;float:left">{{item.value}}</view>
        <view wx:else>{{item.value}}</view>

这里的话，当点击打勾的时候，会将打勾的index，下标返回给 e.detail.value

  mark(e){
    // 查看选择标记
    console.log('checkbox发生change事件，携带value值为：', e.detail.value)
    const  todo = this.data.todo  //选择的值
    const  index = e.detail.value     //选中的值
    // todo[index].checked = !todo[index].checked
    var len = index['length']
    // console.log(index['length'])
    // 将所有的checked清零
    for(var i = 0; i < todo.length;i++){
      todo[i].checked = false
    }
    console.log(todo)
    // 将选中的标上一
    for(var i = 0;i < len;i++){
      todo[index[i]].checked = true
    }
    console.log(todo)
    this.setData({
      todo
    })
  },

wxml 代码：

<!--index.wxml-->
<view class="container">


  <view class="add-list">
    <!-- 使用变量的保存 -->
    <input  type="text" auto-focus placeholder="你想要做什么？" value="{{todolist_one}}" bindinput="bindKeyInput" />
    <button class="btn" bindtap="add">添加</button>
  </view>
  <view>
    <!-- 使用for循环遍历数组 -->
    <checkbox-group bindchange="mark">
      <view class="add-list" wx:for="{{todo}}" wx:key="{{item.value}}">
        <checkbox value="{{index}}" checked="{{item.checked}}"></checkbox>
        <view wx:if="{{item.checked == true}}" style="text-decoration:line-through;color:blue;float:left">{{item.value}}</view>
        <view wx:else>{{item.value}}</view>
        <!-- 通过data-index来传递参数 -->
        <button class="btn" bindtap="delete" data-index="{{index}}">删除</button>
      </view>
    </checkbox-group>


  </view>
</view>




js代码

// pages/todolist/todolist.js
Page({


  /**
   * 页面的初始数据
   */
  data: {
    todolist_one:"",
    todolist:["11232","2",3,4,5],
    choose:[1,2,3,4,5],
    todo:[{value:"起床",checked:true},
          {value:"吃早饭",checked:true},
          {value:"睡觉",checked:false},
          {value:"吃午饭",checked:false},
        ]
  },
  bindKeyInput(e){
    this.setData ({
      todolist_one:e.detail.value
    })
    //console.log(e.detail.value)
  },
  add(e){
    var todo = this.data.todo
    var one = {value:'',checked:false}
    // 不为空的时候才可以添加
    if(this.data.todolist_one !== ''){
      one.value = this.data.todolist_one
      todo.unshift(one) //添加想要的字段
      this.setData({
        todolist_one:'', //将之前的清除
        todo:todo
      })
    }


    console.log(this.data.todo)
  },
  delete(e){
    // 接收对应数组数目的参数
    var index = e.currentTarget.dataset.index
    var todo = this.data.todo
    // 对数组进行操作,删除对应的list
    todo.splice(index,1)
    // console.log(todolist)
    this.setData({
      todo:todo
    })
    // console.log(e.currentTarget.dataset.index)
  },
  mark(e){
    // 查看选择标记
    console.log('checkbox发生change事件，携带value值为：', e.detail.value)
    const  todo = this.data.todo  //选择的值
    const  index = e.detail.value     //选中的值
    // todo[index].checked = !todo[index].checked
    var len = index['length']
    // console.log(index['length'])
    // 将所有的checked清零
    for(var i = 0; i < todo.length;i++){
      todo[i].checked = false
    }
    console.log(todo)
    // 将选中的标上一
    for(var i = 0;i < len;i++){
      todo[index[i]].checked = true
    }
    console.log(todo)
    this.setData({
      todo
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {


  },


})

wxss代码

/* pages/todolist/todolist.wxss */
.container{
  margin-top: 30rpx;
  margin-left: 30rpx;
  border-radius: 5px;
  background-color: white;
  width: 100%;
  padding-bottom: 1rpx;
  
}
.add-list{
  width: 100%;
  display: flex;
  float: left;
  outline-color: rgb(230, 230, 230);
}
.btn{
  margin-right: 30rpx;
  display: flex;
  float: right;
  background-color: gold;
}