自定義單選框樣式以及獲取單選框的選中狀態(tài)

沈儉發(fā)布于2019-08-23 14:33 / 2232人閱讀

摘要：為其添加屬性區(qū)分微信還是支付寶微信支付寶獲取標簽數(shù)組如果被選中則執(zhí)行以下代碼如果選中微信，則輸出反之輸出四自定義選中框樣式未選中的樣式不換行空格選中之后的樣式

一、用戶可選擇微信支付或者支付寶支付

單選框知識點注意：
1.必須要為input添加name屬性，并且屬性值都是相同的，才能實現(xiàn)單選框
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屬性區(qū)分微信還是支付寶微信：value="wechat_h5" 支付寶：value="alipay_h5"

    getPayType() {
      var choose = document.getElementsByClassName("choose") // 獲取標簽數(shù)組
      for (var i = 0; i < choose.length; i++) {
        if (choose[i].checked) { // 如果被選中則執(zhí)行以下代碼
          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)

云服務(wù)器 GPU云服務(wù)器單選框 html打勾單選框 js單選框只讀 php 單選框取值

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/100791.html

相關(guān)文章

CSS魔法堂：改變單選框顏色就這么吹毛求疵！

摘要：前言是否曾經(jīng)被業(yè)務(wù)提出能改改這個單選框的顏色吧讓它和主題顏色搭配一下吧，然后苦于原生不支持換顏色，最后被迫自己手擼一個湊合使用。設(shè)置為的樣式行為特征單選框的行為特征，明顯就是選中與否，及選中狀態(tài)的改變事件，因此我們必須保持對外提供事件。前言 ?是否曾經(jīng)被業(yè)務(wù)提出能改改這個單選框的顏色吧！讓它和主題顏色搭配一下吧！，然后苦于原生不支持換顏色，最后被迫自己手擼一個湊合使用。若拋開inpu...

freecode 2019-08-29 16:52 評論0 收藏0
js/jQuery中單選框、下拉框的取值、設(shè)置

摘要：中單選框下拉框的取值設(shè)置一單選框前言中，方法獲取的是元素的屬性而獲取的則是元素的特性。和應(yīng)使用方法進行取值或賦值。 js/jQuery中單選框、下拉框的取值、設(shè)置一.單選框前言：jQuery中，prop()方法獲取的是元素的屬性（property）,而attr()獲取的則是元素的特性(attribute)。selectedIndex, tagName, nodeName, node...

YorkChen 2019-08-22 10:50 評論0 收藏0
純CSS實現(xiàn)網(wǎng)站常用的五角星評分和分數(shù)展示交互效果

摘要：技術(shù)我們使用一些特殊的選擇器，然后配合單選框以及復(fù)選框自帶的一些特性，可以實現(xiàn)元素的顯示隱藏效果。當接口返回的分數(shù)是分的時候，剛好占據(jù)一半的星星，星半，只要計算出百分比就行，只用管數(shù)據(jù)，用上數(shù)據(jù)驅(qū)動的特點來動態(tài)展示樣式這個簡直不要太容易。最近做的一個項目涉及到評分和展示分數(shù)的模塊，UI設(shè)計師也給了幾個切好的圖片，實現(xiàn)五角星評分方式很多，本質(zhì)愛折騰的精神和對性能追求以及便于維護的考慮，...

Towers 2019-08-29 12:20 評論0 收藏0
純CSS實現(xiàn)網(wǎng)站常用的五角星評分和分數(shù)展示交互效果

摘要：技術(shù)我們使用一些特殊的選擇器，然后配合單選框以及復(fù)選框自帶的一些特性，可以實現(xiàn)元素的顯示隱藏效果。當接口返回的分數(shù)是分的時候，剛好占據(jù)一半的星星，星半，只要計算出百分比就行，只用管數(shù)據(jù)，用上數(shù)據(jù)驅(qū)動的特點來動態(tài)展示樣式這個簡直不要太容易。最近做的一個項目涉及到評分和展示分數(shù)的模塊，UI設(shè)計師也給了幾個切好的圖片，實現(xiàn)五角星評分方式很多，本質(zhì)愛折騰的精神和對性能追求以及便于維護的考慮，...

wyk1184 2019-08-20 15:31 評論0 收藏0
純CSS實現(xiàn)網(wǎng)站常用的五角星評分和分數(shù)展示交互效果

摘要：技術(shù)我們使用一些特殊的選擇器，然后配合單選框以及復(fù)選框自帶的一些特性，可以實現(xiàn)元素的顯示隱藏效果。當接口返回的分數(shù)是分的時候，剛好占據(jù)一半的星星，星半，只要計算出百分比就行，只用管數(shù)據(jù)，用上數(shù)據(jù)驅(qū)動的特點來動態(tài)展示樣式這個簡直不要太容易。最近做的一個項目涉及到評分和展示分數(shù)的模塊，UI設(shè)計師也給了幾個切好的圖片，實現(xiàn)五角星評分方式很多，本質(zhì)愛折騰的精神和對性能追求以及便于維護的考慮，...

Tony_Zby 2019-08-01 16:35 評論0 收藏0