ionic4-checkbox实现全选

╰+哭是因爲堅強的太久メ 2022-03-25 12:05 252阅读 0赞

效果如下

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25pbmdtZW5nYmFieQ_size_16_color_FFFFFF_t_70][]

代码如下

<ion-checkbox  #id style="margin-top: 8px;"
     (click)="checkAll(id)" checked = "false"></ion-checkbox>

标签上加上一个变量然后将这个变量当做参数传给全选的方法，\#id就是那个变量，默认是\#，名字可以随意起。

checkAll(event) {
         if (!event.checked ) {  ----传过来的标签里面就有checked属性
          this.selectPerson = [];
          this.user.forEach(item => {
            item.isChecked = true;  ---这个定义了变量之后需要在html中用ngModel来绑定
            const data = item.userId + item.userName; --- id和name拼接
            this.selectPerson.push(data);
          });
        } else {
          this.selectPerson = [];
          this.user.forEach(item => {
            item.isChecked = false;
          });
        }
       }

<ion-checkbox class="checkbox" [(ngModel)]="item.isChecked"></ion-checkbox>

这样就成功了。

这里用的是用变量接收标签的内容。

$event $this $target

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25pbmdtZW5nYmFieQ_size_16_color_FFFFFF_t_70 1][]

![20190122213454616.png][]

搜索框用event.target.value

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25pbmdtZW5nYmFieQ_size_16_color_FFFFFF_t_70]: /images/20220325/1935a8e23339447fb5ce0f6ccc89cd6a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25pbmdtZW5nYmFieQ_size_16_color_FFFFFF_t_70 1]: /images/20220325/ab79f1b971fd43d2ade71cf78ad06372.png
[20190122213454616.png]: /images/20220325/9b9898cdfe134f42a58f530f1783d24c.png

发表评论取消回复

表情：

评论列表（有 0 条评论，252人围观）

还没有评论，来说两句吧...

相关阅读

相关 Jquery 实现checkbox的反选,全选，全不选.

HTML 页面结构 <div> <input name="chkItem" type="checkbox" value="今日话题"/> 今日

本是古典何须时尚/ 2024年02月17日 18:16/ 0 赞/ 85 阅读

相关 CheckBox全选按钮

在做项目的时候，发现自己对表头双击不会写，这可把自己气坏了，所以导致自己只能退而求其次，以按钮来代替表头了。 DataGrid表格和CheckBox复选框的关系吗，懂得都懂，

朱雀/ 2022年10月10日 09:51/ 0 赞/ 203 阅读

相关 el-checkbox-group全选、单选实现

页面结构： <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange

逃离我推掉我的手/ 2022年09月05日 01:46/ 0 赞/ 277 阅读

相关 jQuery实现的Checkbox“全选/全不选”

自己实现的checkbox的“全选/全不选”，只需要传入“全选/全不选”checkbox的id属性和行的checkbox的name属性即可 / 全选/全不

- 日理万妓/ 2022年08月11日 03:22/ 0 赞/ 281 阅读

相关 jQuery实现CheckBox全选、全不选

`<!DOCTYPE html PUBLIC` `"-//W3C//DTD XHTML 1.0 Transitional//EN"` `"http://www.w3.org/T

悠悠/ 2022年06月14日 12:16/ 0 赞/ 252 阅读

相关 jQuery实现CheckBox全选、全不选

<script src="jquery-1.6.2.min.js"></script> <input type="checkbox" id=

喜欢ヅ旅行/ 2022年06月12日 00:17/ 0 赞/ 279 阅读

相关 JQuery实现checkbox全选和反选

function selectAll(){ //id=all是全选/反选的checkbox，判断是选中还是没选中 var isChecked=$

今天药忘吃喽~/ 2022年05月08日 11:26/ 0 赞/ 251 阅读

相关 checkbox全选,反选,获取全选值,获取checkbox勾选长度

这个checkbox全选反选这些场景还是挺常见的，So,在此记录一下，方便大家方便自己。废话不多说，直接看代码。。 1.全选和反选,参数为name和id //j

朴灿烈づ我的快乐病毒、/ 2022年04月23日 12:58/ 0 赞/ 312 阅读

相关 ionic4-checkbox实现全选

效果如下 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2

╰+哭是因爲堅強的太久メ/ 2022年03月25日 12:05/ 0 赞/ 253 阅读

相关 checkbox全选操作

1、全选 //参数1：点击“全选”多选钮ID //参数2：需要被全选的多选钮Name function checkAll(id, checknam

蔚落/ 2021年09月12日 05:26/ 0 赞/ 407 阅读