在uniapp中。
首先加上checkbox标签,checkbox标签外包裹checkbox-group标签,checkbox-group标签上有@change属性,可以触发change事件,可以获取value的值。
<view class="cartlist">
<checkbox-group @change="allselected">
<checkbox :checked="allchecked" />全选
</checkbox-group>
<view class="cartitem" v-for="(item, index) of cartlist" :key="index">
<checkbox-group @change="selected(item)">
<checkbox :checked="item.flag" />
</checkbox-group>
{{ item.proname }} ¥{{ item.price }} -- {{ item.num }}
<text @click="reduce(item)">[-]</text>
<text @click="add(item)">[+]</text>
<text @click="del(item, index)">[del]</text>
</view>
</view>
然后我们先做全选,先定义一个allselected全选事件,并在data中定义一个标识 allchecked: true。通过取反来改变选中状态,然后通过allchecked的布尔值来个遍历的列表赋予一个flag标识,来确定是否子选项是否选中。
allselected () {
this.allchecked = !this.allchecked
if (this.allchecked) {
this.cartlist.map( item => {
item.flag = true
})
} else {
this.cartlist.map( item => {
item.flag = false
})
}
}
然后单选,首先传递一个item参数,参数中有当前单选的flag标识。通过flag来判断当前项是否被选中,然后通过遍历列表,来判断是否所以的flag都为true或者都为false,以此来个allchecked赋值。
selected (item) {
item.flag = !item.flag
if(!item.flag) {
this.allchecked = false
} else {
const test = this.cartlist.every(item => {
return item.flag === true
})
if (test) {
this.allchecked = true
} else {
this.allchecked = false
}
}
}
在taro中。
一样用checkboxgroup标签,标签内有onChange属性,可以写时间。
首先写全选,在onChange事件中,有一个event参数,参数中的event.detail.value标示选中状态下checkbox中value属性的值所组成的数组,我们通过判断这个数字的长度来判读,checkbox是否被选中,如果选中,我们就用map函数遍历我们的列表,把其中表示checkbox选中状态的属性都改未true,反之则相反。
<CheckboxGroup onChange={
(event) => {
let len = event.detail.value.length
let flag = len === 1 ? true : false
let list = this.state.cartlist
list.map(item => {
flag ? item.flag = true : item.flag = false
})
this.setState({
allSelected: flag,
cartlist: list
})
}
}>
<Checkbox checked={ this.state.allSelected } />全选
</CheckboxGroup>
然后是单选,还是通过event.detail.value数组的长度来判断,当前选项是否点击选中,如果是,就利用index设置当前这项的falg标识为true,并用every函数,判断列表中所有项的标识是否都为true,是,则设置allchecked的标识为true,反之,亦然。
<CheckboxGroup onChange={
(event) => {
let len = event.detail.value.length
let flag = len === 1 ? true : false
let list = this.state.cartlist
if (flag === true) {
list[index].flag = true
let test = list.every(val => {
return val.flag === true
})
if (test) {
this.setState({
allSelected: true,
cartlist: list
}, () => {
this.count()
})
} else {
this.setState({
allSelected: false,
cartlist: list
}, () => {
this.count()
})
}
} else {
list[index].flag = false
this.setState({
allSelected: false,
cartlist: list
}, () => {
this.count()
})
}
}
}>
<Checkbox checked={item.flag}/>
</CheckboxGroup>
最后,在逆战中求生存,抗击疫情,我们为武汉加油,为中国加油。