自定义单选框样式以及获取单选框的选中状态

沈俭发布于2019-08-23 14:33 / 2224人阅读

摘要：为其添加属性区分微信还是支付宝微信支付宝获取标签数组如果被选中则执行以下代码如果选中微信，则输出反之输出四自定义选中框样式未选中的样式不换行空格选中之后的样式

一、用户可选择微信支付或者支付宝支付

单选框知识点注意：
1.必须要为input添加name属性，并且属性值都是相同的，才能实现单选框
2.type属性为radio

二、不同浏览器其默认的选项不同
js方法：对象.checked = true
备注：微信浏览器默认选择微信支付
其它浏览器默认选择支付宝支付

    judgePay() {
      if (browser.versions.mobile && browser.versions.weixin) { // 既是移动端也是微信浏览器
        document.getElementById("wechat").checked = true //获取id为‘wechat’的标签，并为它添加属性checked
      } else if (browser.versions.mobile && !browser.versions.weixin) { // 移动端但不是微信浏览器
        document.getElementById("zhifubao").checked = true //同上
      }
    }

三、获取当前选中的是微信支付还是支付宝支付。
为其添加value属性区分微信还是支付宝微信：value="wechat_h5" 支付宝：value="alipay_h5"

    getPayType() {
      var choose = document.getElementsByClassName("choose") // 获取标签数组
      for (var i = 0; i < choose.length; i++) {
        if (choose[i].checked) { // 如果被选中则执行以下代码
          console.log(choose[i].getAttribute("value")) // 如果选中微信，则输出wechat_h5 反之输出 alipay_h5
        }
      }
    },

四、自定义选中框样式

input[type="radio"] + label::before // 未选中的样式
  content "a0" /* 不换行空格 */
  display inline-block
  vertical-align middle
  font-size 12px
  width 0.213333rem /* 8/37.5 */
  height 0.213333rem /* 8/37.5 */
  border-radius 50%
  border 1px solid #01cd78
  text-indent 0.15em
  line-height 1
  background-clip content-box
  padding 0.08rem /* 3/37.5 */
input[type="radio"]:checked + label::before // 选中之后的样式
  background-color #01cd78
  background-clip content-box
  padding 0.08rem /* 3/37.5 */
input[type="radio"]
  position absolute
  clip rect(0, 0, 0, 0)

GPU云服务器云服务器单选框 html打勾单选框 js单选框只读 php 单选框取值

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100791.html

CSS魔法堂：改变单选框颜色就这么吹毛求疵！

摘要：前言是否曾经被业务提出能改改这个单选框的颜色吧让它和主题颜色搭配一下吧，然后苦于原生不支持换颜色，最后被迫自己手撸一个凑合使用。设置为的样式行为特征单选框的行为特征，明显就是选中与否，及选中状态的改变事件，因此我们必须保持对外提供事件。前言是否曾经被业务提出能改改这个单选框的颜色吧！让它和主题颜色搭配一下吧！，然后苦于原生不支持换颜色，最后被迫自己手撸一个凑合使用。若抛开inpu...

freecode 2019-08-29 16:52 评论0 收藏0
js/jQuery中单选框、下拉框的取值、设置

摘要：中单选框下拉框的取值设置一单选框前言中，方法获取的是元素的属性而获取的则是元素的特性。和应使用方法进行取值或赋值。 js/jQuery中单选框、下拉框的取值、设置一.单选框前言：jQuery中，prop()方法获取的是元素的属性（property）,而attr()获取的则是元素的特性(attribute)。selectedIndex, tagName, nodeName, node...

YorkChen 2019-08-22 10:50 评论0 收藏0
纯CSS实现网站常用的五角星评分和分数展示交互效果

摘要：技术我们使用一些特殊的选择器，然后配合单选框以及复选框自带的一些特性，可以实现元素的显示隐藏效果。当接口返回的分数是分的时候，刚好占据一半的星星，星半，只要计算出百分比就行，只用管数据，用上数据驱动的特点来动态展示样式这个简直不要太容易。最近做的一个项目涉及到评分和展示分数的模块，UI设计师也给了几个切好的图片，实现五角星评分方式很多，本质爱折腾的精神和对性能追求以及便于维护的考虑，...

Towers 2019-08-29 12:20 评论0 收藏0
纯CSS实现网站常用的五角星评分和分数展示交互效果

摘要：技术我们使用一些特殊的选择器，然后配合单选框以及复选框自带的一些特性，可以实现元素的显示隐藏效果。当接口返回的分数是分的时候，刚好占据一半的星星，星半，只要计算出百分比就行，只用管数据，用上数据驱动的特点来动态展示样式这个简直不要太容易。最近做的一个项目涉及到评分和展示分数的模块，UI设计师也给了几个切好的图片，实现五角星评分方式很多，本质爱折腾的精神和对性能追求以及便于维护的考虑，...

wyk1184 2019-08-20 15:31 评论0 收藏0
纯CSS实现网站常用的五角星评分和分数展示交互效果

摘要：技术我们使用一些特殊的选择器，然后配合单选框以及复选框自带的一些特性，可以实现元素的显示隐藏效果。当接口返回的分数是分的时候，刚好占据一半的星星，星半，只要计算出百分比就行，只用管数据，用上数据驱动的特点来动态展示样式这个简直不要太容易。最近做的一个项目涉及到评分和展示分数的模块，UI设计师也给了几个切好的图片，实现五角星评分方式很多，本质爱折腾的精神和对性能追求以及便于维护的考虑，...

Tony_Zby 2019-08-01 16:35 评论0 收藏0