【Vue】element-ui 的checkbox 如何点击其他按钮改变checkbox的勾选

• Z时代
• 2024-01-10
• 分类：技术分享

<el-checkbox class="aaa">备选项</el-checkbox>
<div @click="aaaa">123</div>

  aaaa(){
console.log(123)
$('.el-checkbox .el-checkbox__original').attr('checked', true)
},

点击123 让checkbox勾选。再点123 让不勾选，我改变checked的值怎么点都没反应，求解

我的需求是这样的，列表是可勾选的（但不是element-ui的表格多选），选择勾选后发送请求，成功后要把之前勾选的变为不勾选。

补充：忘了说，我是el-checkbox-group 所以el-checkbox 没有v-model值

回答

<el-checkbox v-model="checked">备选项</el-checkbox>
data(){
    return {
        checked:false
    }
},
aaaa(){
   this.checked = !this.cheched;
       if(this.checked){
               //发请求
               //请求成功 this.checked = false;
       }
   }

//------------------补充

<el-checkbox-group v-model="checkList">
<el-checkbox label="复选框 A" value="1"></el-checkbox>
<el-checkbox label="复选框 B" value="2"></el-checkbox>
<el-checkbox label="复选框 C"></el-checkbox>
<el-checkbox label="禁用" disabled></el-checkbox>
<el-checkbox label="选中且禁用" disabled></el-checkbox>
</el-checkbox-group>
<el-button size="mini"  @click="handleBtnClick">点我点我</el-button>
data(){
    return {
        checkList: []
    }
},
methods:{
    handleBtnClick(){
        console.log(this.checkList);
    }
}
建议：仔细阅读官方文档，多多摸索

操作$ref里面有checked属性
this.$refs.checkBox.checked = true;

//这个html
<el-checkbox v-model="checked">备选项</el-checkbox>
//js
data(){
return {
    checked:false
}
}
//事件
aaaa(){
this.checked = true;
}

以上是 【Vue】element-ui 的checkbox 如何点击其他按钮改变checkbox的勾选 的全部内容， 来源链接： utcz.com/a/77906.html