layui 实现同一个radio点击取消选中并将值赋空

最新推荐文章于 2024-01-23 11:01:00 发布

yzmy

最新推荐文章于 2024-01-23 11:01:00 发布

阅读量1.1k

点赞数

分类专栏： layui vue 文章标签： layui javascript 前端

本文链接：https://blog.csdn.net/lizaiismy/article/details/125161654

版权

layui 同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

vue

3 篇文章 0 订阅

订阅专栏

HTML

<div class="layui-card-body" id="evaluationForm" lay-filter="evaluationForm">
	<input type="radio" class="layui-form-radio" name="airway" value="airwayNone">
    <span style="font-weight: bold;font-size:16px;font-family: 宋体;" v-model="recordTemplateInfo.airway" :checked="recordTemplateInfo.airway">无</span>
    <input type="radio" class="layui-form-radio" name="airway" value="airwayHave" v-model="recordTemplateInfo.airway" :checked="recordTemplateInfo.airway">
    <span style="font-weight: bold;font-size:16px;font-family: 宋体;">有</span>
</div>

				//注意我的架构是layui+vue 所以以下that.xxx需要自行更换或删除
				that.$('#evaluationForm :radio').bind('click', function (e) {
                        var v = this.value;
                        that.$set(that.recordTemplateInfo, this.name, v);
                        //radio 点击两次取消选中
                        var $radio = that.$(this);
                        // if this was previously checked
                        if ($radio.data('waschecked') == true) {
                            that.$set(that.recordTemplateInfo, this.name, '');
                            $radio.prop('checked', false);
                            $radio.data('waschecked', false);
                        } else {
                            $radio.prop('checked', true);
                            $radio.data('waschecked', true);
                        }
                        // remove was checked from other radios
                        $radio.siblings('input[type="radio"]').data('waschecked', false);
                    });