取消radio的选中状态

radio一旦选中一般是取消不了选中状态的，但是可以通过js操作数据的方式实现。

以element-ui的radio组件为例，可以给radio增加一个native后缀去监听原生的点击事件（不加无法监听点击），增加一个prevent后缀去除radio组件原来自带的行为来执行新的逻辑。当点击的时候，如果当前点击的选项还没有被选中过，那么给v-model绑定的值赋值为当前选中的选项的值，如果当前点击的选项已经选中了，那么v-model绑定的值就重置为空，这样就可以实现***取消radio的选中状态***的效果了。

以下是代码：

<div v-for="(item, infoIndex) in formData.hots" :key='infoIndex' class="product-item"><el-radio-group v-model="item.label"><el-radio :label="0" @click.native.prevent="clickRadioItem(0,infoIndex)">热</el-radio><el-radio :label="1" @click.native.prevent="clickRadioItem(1,infoIndex)">新</el-radio></el-radio-group>
</div>data() {return {formData: {hots: []},};
}methods: {clickRadioItem(e, index) {if (this.formData.hots[index].label === e) {this.formData.hots[index].label = null} else {this.formData.hots[index].label = e}}
}

取消radio的选中状态相关推荐

layui 查看编辑页面，radio 默认选中状态
/*** @param form* @param 更新全部表单*/ function reloadFrom() {layui.use(["form"],function () {v ...
jQuery设置radio默认选中状态及获取选中值
jQuery设置radio默认选中状态及获取选中值 //获取选中值 var rechargeType = $("input[name='rechargeType']:checked" ...
input type=“radio“默认按钮选中状态
html: <input id="Radio1" type="radio" value="男" name="st_Sex&q ...
实现radio单选框单击取消选中状态
需求:项目中对于有些单选内容可以设置默认选中,也可以不设置默认选中,而一般使用radio后,选中其中一个后,就无法让全部的radio恢复到一开始的未选中状态,如下图: 后面的单选框只能三选一,并且也可 ...
取消iview UI框架的Radio选中状态
调试过程: 先给RadioGroup绑定切换Radio时触发的事件@on-change="radioChange" 再给两个Radio标签加入ref标识分别命名为"rad ...
html中radio、checkbox选中状态研究（静下心来看，静下心来总结）
html中radio.checkbox选中状态研究(静下心来看,静下心来总结) 一.总结 1.单选框的如果有多个checked 会以最后一个为准 2.js动态添加checked属性:不行:通过 $(& ...
jQuery：1.5.4.3，表格变色（单击行，把当行的单选按钮(radio)设为选中状态，并应用当前样式）...
ylbtech-jQuery:jQuery学习 jQuery语法实例表格变色效果截图 jQuery:1.5.4.3,表格变色(单击行,把当行的单选按钮(radio)设为选中状态,并应用当前样式) H ...
table（单击行，把当行的单选按钮(radio)设为选中状态，并应用当前样式）
直接上代码 <%@ page language="java" contentType="text/html; charset=UTF-8"pageEnco ...
jQuery取消checkbox选中状态
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>jQu ...

取消radio的选中状态

取消radio的选中状态相关推荐

最新文章

热门文章