微信小程序如何实现单选按钮
导读:本文共1266.5字符,通常情况下阅读需要4分钟。同时您也可以点击右侧朗读,来听本文内容。按键盘←(左) →(右) 方向键可以翻页。
摘要: 逻辑单选框的逻辑比较简单,把所有的元素遍历出来,等到点击单选按钮的时候,当value值与遍历变量值一致的时候就 把checked 设置为true,其他的时候把checked设置为 false 只需要一次循环。复选框的逻辑,也不复杂,当只有一个被选中的选项的时候,当点击已经选择的选项的时候,首选外层循环设置为false,这个时候 e.detail.value为零,... ...
目录
(为您整理了一些要点),点击可以直达。单选框的逻辑比较简单,把所有的元素遍历出来,等到点击单选按钮的时候,当value值与遍历变量值一致的时候就 把checked 设置为true,其他的时候把checked设置为 false 只需要一次循环。
复选框的逻辑,也不复杂,当只有一个被选中的选项的时候,当点击已经选择的选项的时候,首选外层循环设置为false,这个时候 e.detail.value为零,所以无法进入内层循环,所以被取消。当选中未选择的选项的时候,则从第一个选项开始遍历,如果value值与外层相同则设置为TRUE。然后跳出内层,继续遍历,当有两个选中的选项的时候,点击已经选择的按钮,values值会减少l,所以最后一次的外层循环无法进入内层,所有取消该选项。
举例, 两选一 , 默认选中第一个;效果图如下:
.wxml文件 :
.js文件 :
.wxss文件 :
微信小程序如何实现单选按钮的详细内容,希望对您有所帮助,信息来源于网络。