自定義單選框樣式以及獲取單選框的選中狀態

沈儉發布于2019-08-23 14:33 / 2222人閱讀

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

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

單選框知識點注意：
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 單選框取值

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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