微信小程序-根据js变量值设置radio的checked属性-自己踩过的坑

最新推荐文章于 2024-03-26 00:25:20 发布
最新推荐文章于 2024-03-26 00:25:20 发布
阅读量1.3k 收藏 2
点赞数 1
分类专栏： 微信小程序 文章标签： 小程序 js html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44633685/article/details/114646358
版权 
<radio class="statusRadio_2" value="2" checked="{{pStatus}}=='2' ? true:false" style="margin-left:20rpx">正在使用</radio>

*[HTML]:

1.因为{{pStatus}}=='2' ? true:false是字符串，所以checked判断为真'
2.而"{{pStatus=='2' ? true:false}}" 这个才是判断pStatus是否等于'2'

正确做法：

<radio class="statusRadio_2" value="2" checked="{{pStatus=='2' ? true:false}}" style="margin-left:20rpx">正在使用</radio>

总结：
主要是自己没有掌握wxml的语法

qq_44633685
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序（十九）radio组件详细介绍
12-28
radio组件为单选组件与radio-group组合使用，使用方式和checkbox没啥区别 主要属性： wxml <!--设置监听器，当点击radio时调用--> <radio bindchange=listenerRadioGroup> <!--label通常与radio和checkbox结合使用--> <label xss=removed wx:for-items={{array}}> <radio value={{item.name}} checked={{item.checked}}/>{{item.value}} </l
微信小程序单选radio及多选checkbox按钮用法示例
11-28
本文实例讲述了微信小程序单选radio及多选checkbox按钮用法。分享给大家供大家参考，具体如下： 1.单选：radio 实例： js: Page({ data : { radioId:"", loves:[ {id:1, name:"跑步" ,checked : 'true'}, {id:2, name:"篮球" }, {id:3, name:"足球" }, ] }, updataRadio:function(e){ var Id=e.value.id this.setData({ radioId:Id }) }, }) wxml: <radio-group class="radi
微信小程序修改checkbox和radio的样式
最新发布
叶落无痕的博客
03-26 425
这里需要注意的是选中状态的样式，我这里将border设置为2px宽度，颜色改为和背景色一样，网上有的代码直接将border设置为none，这样的话宽度是会发生变化的，而border设置成2px，宽度就不会发生变化。的时候，有时候需要修改小程序中checkbox和radio的原生样式，如何修改呢？这里给大家提供了一份代码，大家可以试试。在程序中引用上述css即可。
微信小程序 radio 单选框
Bi-Hu的博客
09-07 315
属性类型默认值必填说明最低版本 value string 否 radio标识。当该radio选中时，radio-group的 change 事件会携带radio的value 1.0.0 checked boolean false 否 当前是否选中 1.0.0 disabled boolean false 否 是否禁用 1.0.0 color string #09...
js动态设置单选输入框(radio)选中状态
I_recluse的博客
07-26 1万+
有时需要在js中动态控制单选输入框的选中状态，这一般有两种方法： 1.通过设置input单选输入框的元素属性“checked”为“checked”，但需要注意的是，要把上一次设置的“checked”属性去掉，不然再次点击同一个元素的时候，选中状态就会错误。 2.通过设置input单选输入框的DOM节点属性“checked”为true或false来实现。 下面通过一个例子来说明两种方法，这个例...
radio设置属性checked属性不生效问题汇总
heerey525
03-20 7131
情况是这样的： 通过js动态设置radio添加checked属性，在控制台看到已经存在checked，但是页面显示没有选中。 分为两种情况来讲 情况一：用attr添加，removeAttr移除（即为我所遇到的问题） 解决方案：用prop和removeProp代替 原因：jQuery版本较低，attr存在这样的缺陷 情况二：在同页面除该组radio外的其他组radio设置name相同值...
html radio选中状态,js表单元素checked、radio被选中的几种方法(详解)
weixin_35965498的博客
06-02 1607
0、环境lolvar lol = document.getElementsByTagName("input")[0];1、HTML DOMa.lol.checked = true;属性的值可以不是lol，只要转为布尔值的时候为true就可以，取值时只有true、false两种不会增加checked标记b.lol.click();不会增加checked标记，这时lol.checked的值为true2...
微信小程序如何实现radio单选框单击打勾和取消
11-21
前端使用input 来写radio,小程序使用radio标签 也可以使用<radio>单标签 1.自定义radio样式、 wx默认的是真的丑 /* 单选框样式 */ /* 初始样式 */ radio .wx-radio-input{ width: 32rpx; height: 32rpx; ...
微信小程序radio组件使用详解
12-29
本文为大家分享了微信小程序radio组件的使用方法，供大家参考，具体内容如下 效果图 WXML <view class=tui-content> <radio class=radio-group bindchange=radioChange> <label class=radio wx:for={{items}}> ...
微信小程序开发问答《六十九》radio样式不能自定义 & 多个input如何方便的获取
03-29
1、小程序的radio样式不能自定义吗？2、微信小程序中多个input如何方便的获取, 检测验证然后提交？（双向绑定?）3、摩拜单车小程序微信授权注册时可以直接发送验证码（由【腾讯科技】发送）给用户，是哪个接口？4、 ...
微信小程序实现多选框全选与反全选及购物车中删除选中的商品功能
12-30
实现的效果就是： ...2.在选中的同时获取需要的商品id，获取后...checkbox被选中的值就是这个goods_id checked={{item.checked}} -->checked代表选中与否 ，ture选中，false未选中 //删除购物车商品的按钮 删除</
微信小程序实现留言板功能
12-09
本文实例为大家分享了微信小程序实现留言板功能，可以手写，可以删除，可以快速留言，供大家参考，具体内容如下 const app = getApp(); Page({ /** * 页面的初始数据 */ data: { msgData: [ { child_id: 1,...
微信小程序checkbox组件使用详解
01-03
本文为大家分享了微信小程序checkbox组件的使用方法，供大家参考，具体内容如下 效果图 WXML <view class=tui-content> <view class=tui-menu-list><checkbox value={{item.name}} checked={{item.checked}}/...
微信小程序实现工作时间段选择
01-03
本文实例为大家分享了微信小程序工作时间段选择的具体代码，供大家参考，具体内容如下 1. 效果图如上，需完成时间段的选择 以及下面的工作日选择 保存按钮为formSubmit提交后台 2.思路： ①时段用picker跟input ...
js 获取radio和checked详解
飞鱼计划
03-30 1万+
<script> $("input[name=but]").click(function(){ //open_id=$("input[name=open_id]").val(); wangwang_no=$("input[name=wangwang_no]").val(); //vipmoney=$("input[name=vipmoney]").val();if(wangw
js控制radio选中
热门推荐
前端学习日记
12-16 3万+
经常会遇到js控制radio选中和切换的问题 之前一直使用的是checked属性来完成的 但是现在发现这个属性有个大问题 今天就是用js给选中radio的赋值，使用的$().attr("checked",true); 当切换的时候，把name相同的radio的attr("checked",false)，再把要选中的radio.attr("checked",true)； 但是问题来了，每个
js控制radio
Ethe的博客
08-25 1640
【代码】js控制radio。
微信小程序checkbox-group传值
05-19
当用户勾选或取消勾选一个 checkbox 时，可以通过绑定 change 事件来监听并处理这个操作。在 change 事件的处理函数中，可以通过事件对象 event 来获取当前 checkbox 的值和是否被勾选。可以将这些值存储到一个数组中，最后将这个数组作为参数传递给后台接口。 下面是一个示例代码： 1. 在 wxml 文件中： ```html <checkbox-group bindchange="checkboxChange"> <label wx:for="{{checkboxItems}}" wx:key="{{index}}"> <checkbox value="{{item.value}}" checked="{{item.checked}}">{{item.name}}</checkbox> </label> </checkbox-group> ``` 2. 在 js 文件中： ```javascript Page({ data: { checkboxItems: [ { name: '选项1', value: '1', checked: false }, { name: '选项2', value: '2', checked: false }, { name: '选项3', value: '3', checked: false }, ], checkedValues: [] }, checkboxChange: function(e) { const values = e.detail.value; const items = this.data.checkboxItems; const checkedValues = []; for (let i = 0, lenI = items.length; i < lenI; ++i) { items[i].checked = false; for (let j = 0, lenJ = values.length; j < lenJ; ++j) { if (items[i].value === values[j]) { items[i].checked = true; checkedValues.push(values[j]); break; } } } this.setData({ checkboxItems: items, checkedValues: checkedValues }); // 将 checkedValues 传递给后台接口 console.log('checkedValues: ', checkedValues); } }) ``` 在上面的示例中，我们通过一个数组 checkboxItems 来保存所有的 checkbox 选项，并且设置了一个 checkedValues 数组来保存用户勾选的值。在 checkboxChange 函数中，我们首先获取到用户勾选的值 values，然后遍历 checkboxItems 数组，将所有的 checked 属性设置为 false。接着再遍历 values 数组，将对应的 checkbox 的 checked 属性设置为 true，并将它的 value 值添加到 checkedValues 数组中。最后通过 setData 函数将更新后的 checkboxItems 和 checkedValues 保存到页面的数据中。同时，我们可以将 checkedValues 数组传递给后台接口来完成数据的提交。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值