js如何监听checkbox的改变

在Vue.js中，绑定checkbox并获取、改变其选中状态是常见的需求。本文将通过一个实例来详细介绍这个过程，并探讨如何处理复选框选中的值问题。 让我们看下HTML部分的代码： ```html <div class="weui-cells weui-cells_checkbox font14" v-for="item in items"> <label class="weui-cell weui-check__label"> <div class="weui-cell__ft width-inherit"> <input type="checkbox" class="weui-check" v-on:click="CheckItem(item)" v-model="item.state" name="checkbox" /> </label> 这段代码中，`v-for`指令用于遍历一个名为`items`的数据数组，每个`item`都有一个`state`属性，用来表示复选框的选中状态。`v-model`指令将`input[type=checkbox]`的选中状态与`item.state`绑定，当用户点击复选框时，`item.state`的值会自动更新。同时，`v-on:click`监听点击事件，调用`CheckItem`方法，传入当前循环的`item`对象。 下面是对应的JavaScript部分： ```javascript var vum = new Vue({ data: { items: [] methods: { CheckItem: function(item) { item.state = !item.state; console.log(this.items); 在这里，Vue实例的`data`选项定义了一个空数组`items`，用于存储待遍历的数据。`methods`选项定义了一个`CheckItem`方法，该方法接收一个参数`item`，当点击事件触发时，`item.state`的值会被取反，实现复选框的选中与取消选中。`console.log(this.items)`用于打印当前`items`数组的状态，方便开发者查看数据变化。 接下来，我们讨论一下Vue中处理复选框选中值的问题。在某些场景下，我们可能希望选中状态对应的值不是简单的`true`或`false`，而是特定的数值。例如： ```html <input type="checkbox" id="m_nh3" v-model="mFormData.bd_3" v-bind:true-value="3" v-bind:false-value="checkFalseValue"> <label for="m_nh3">不含3</label> <input type="checkbox" id="m_nh4" v-model="mFormData.bd_4" v-bind:true-value="4" v-bind:false-value="checkFalseValue"> <label for="m_nh4">不含4</label> <!-- 更多复选框... --> 这里，`v-bind:true-value`和`v-bind:false-value`指令用于指定选中和未选中时对应的值。例如，当复选框`#m_nh3`被选中时，`mFormData.bd_3`的值为3；未选中时，其值为`checkFalseValue`。同样地，`v-model`依然负责同步复选框的选中状态和数据对象的属性。 在数据对象中，我们需要定义`checkFalseValue`，比如： ```javascript data: { mFormData: { bd_3: '', bd_4: '', // ... checkFalseValue: '', 这样，未选中时，复选框对应的值会是`checkFalseValue`的值，而不是默认的`false`。这使得我们能更灵活地处理复选框的值，使其符合后端接口的预期。 总结来说，Vue.js提供了便捷的方式来绑定checkbox的选中状态，并可以通过`v-model`和事件监听轻松地获取和改变状态。对于复选框选中值的处理，我们可以利用`v-bind:true-value`和`v-bind:false-value`指令自定义选中和未选中的值，使数据更符合业务需求。通过这种方式，我们可以简化代码，提高开发效率，同时保持数据的准确性和一致性。希望这个实例对学习Vue.js的朋友们有所帮助。