<el-checkbox @change="checkAll(scope.row)"></el-checkbox>获取其选中状态

时间: 2024-02-24 20:54:44 浏览: 60

vue .js绑定checkbox并获取、改变选中状态的实例

5星 · 资源好评率100%

在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" /> </div> </label> </div> ``` 这段代码中，`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 <p> <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> </p> <p> <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> </p>  ``` 这里，`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的朋友们有所帮助。

你可以在change事件中通过$event.target.checked获取el-checkbox的选中状态，例如： ``` <el-checkbox @change="checkAll(scope.row)"></el-checkbox> methods: { checkAll(row) { console.log($event.target.checked); // true or false } } ```

阅读全文

<el-checkbox @change="checkAll(scope.row)"></el-checkbox>获取其选中状态

相关推荐

jQuery操作checkbox并获取选中值

获得选中的checkBox值

<template slot-scope="scope"> <el-checkbox @change="checkAll(scope.row, $event)" v-model="scope.row.checked"></el-checkbox> </template>改为异步执行

<el-checkbox v-if="scope.row.is_selected==0 ? false : true" v-model="scope.row.is_selected"></el-checkbox>

<el-checkbox @change="checkIsAll($event,checkandAll=!checkandAll)" v-model="checkandAll"></el-checkbox>值改不了为什么

vue 如何获取选择的所有选项列表 <el-row v-for="row in slotNames[${direction}]" :key="row.key"> <el-rol v-for="col in row.cols" :key="col.name"> <el-checkbox class="checkAllbox">{{ col.name }}</el-checkbox> </el-rol> </el-row>

<el-checkbox-group v-model="checkboxGroup" @change="checkboxChange">

使用 vue ,将此 代码 中 typeAction传递参数 el-checkbox-group @change="typeAction" ，用具体代码实现

vue项目中<el-checkbox>标签定义的复选框如何与<el-table-column>标签定义的复选框对齐

<el-checkbox参数

<el-table-column label-class-name="DisabledSelection" align="center" type="selection" width="90"> </el-table-column>阻止其它事件影响

获取 设置 el-checkbox选中状态

el-checkbox-group的change事件如何获取更新之前的值

如何触发第一个el-checkbox的时候取消第二个el-checkbox的选中

vue3中如何触发第一个el-checkbox的时候取消第二个el-checkbox的选中

jQuery判断checkbox选中状态

用JS修改checkbox的选中状态

最新推荐

Vue动态生成el-checkbox点击无法赋值的解决方法

java毕设项目之ssm基于SSM的高校共享单车管理系统的设计与实现+vue(完整前后端+说明文档+mysql+lw).zip

YOLO算法-贴纸检测数据集-212张图像带标签-部分覆盖-未涵盖-完全覆盖.zip

Java毕业设计项目：校园二手交易网站开发指南

管理建模和仿真的文件

【MVC标准化：肌电信号处理的终极指南】：提升数据质量的10大关键步骤与工具

能否提供一个在R语言中执行Framingham数据集判别分析的详细和完整的代码示例？

Blaseball Plus插件开发与构建教程

"互动学习：行动中的多样性与论文攻读经历"

【天线性能提升密籍】：深入探究均匀线阵方向图设计原则及案例分析

使用 vue ,将此代码中 typeAction传递参数 el-checkbox-group @change="typeAction" ，用具体代码实现

获取设置 el-checkbox选中状态