uni-app根据data值动态设置checkbox、radio是否选中

uni-app根据动态值设置单选、多选是否为选中,具体实现效果如下:

0表示未选中,1表示选中。

效果如图:


效果图完整代码:

<template>
<view class="agreement">
<view>
<label class="radio">
<radio value="1" :checked="radioCheck == 1?true:false" />选中</label>
<label class="radio">
<radio value="0" :checked="radioCheck == 0?true:false"/>未选中</label>
</view>
<checkbox-group>
<label>
<checkbox value="1" :checked="checkboxCheck == 1?true:false" color="#FFCC33" style="transform:scale(0.7)" />选中
</label>
<label>
<checkbox value="0" :checked="checkboxCheck == 0?true:false" color="#FFCC33" style="transform:scale(0.7)" />未选中
</label>
</checkbox-group>
</view>
</template>
<script>
export default {
data() {
return {
radioCheck:1,
checkboxCheck:0,
}
},
onShow() {
console.log("单选按钮动态值:"+this.radioCheck)
console.log("多选按钮动态值:"+this.checkboxCheck)
},
}
</script>

<style lang='scss'>

</style>

关键点解析:通过三元二次表达式来判断是为true还是false,进行选中和未选中操作。

三元二次表达式用法解析:

表达式 (expr1) ? (expr2) : (expr3)

在 expr1 求值为 TRUE 时的值为 expr2,在 expr1 求值为 FALSE 时的值为 expr3。

radio属性说明:

属性名类型默认值说明
valueString<radio> 标识。当该 <radio> 选中时,<radio-group> 的 change 事件会携带 <radio> 的 value
checkedBooleanfalse当前是否选中
disabledBooleanfalse是否禁用
colorColorradio的颜色,同css的color

checkbox属性说明:

属性名类型默认值说明
valueString<checkbox> 标识,选中时触发 <checkbox-group> 的 change 事件,并携带 <checkbox> 的 value。
disabledBooleanfalse是否禁用
checkedBooleanfalse当前是否选中,可用来设置默认选中
colorColorcheckbox的颜色,同css的color
小提示:多选,单选操作方法一致,都是通过三元二次表达式来判断是否为true。即当前多选或单选按钮是否被选中操作。
六月初字帖坊小程序 你想要的字帖模板及工具,这里都有!