Js自定義多選框效果的實例代碼

更新時間：2017年07月05日 17:14:46 作者：kerush

本篇文章主要介紹了Js自定義多選效果的實例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

前端入坑紀 27

工作中的一個多選效果，感覺不算太難，就上傳來分享下。

以上圖文，純屬測試，如有雷同，請勿當真

HTML 結構

  <div id="selexWps" class="seletProds clear">
    <div>
      <span>積分<em>5000</em></span>
      ![](wrap/img/pic.png)
      <p>請選擇</p>
    </div>
    <div>
      <span>積分<em>5000</em></span>
      ![](wrap/img/pic.png)
      <p>請選擇</p>
    </div>
    <div>
      <span>積分<em>6000</em></span>
      ![](wrap/img/pic.png)
      <p>請選擇</p>
    </div>
    <div>
      <span>積分<em>7000</em></span>
      ![](wrap/img/pic.png)
      <p>請選擇</p>
    </div>
    <div>
      <span>積分<em>8000</em></span>
      ![](wrap/img/pic.png)
      <p>請選擇</p>
    </div>
    <div>
      <span>積分<em>9000</em></span>
      ![](wrap/img/pic.png)
      <p>請選擇</p>
    </div>
  </div>
  <div class="endBtnsWrp clear">
    <a class="endBtn" href="javascript:;" rel="external nofollow" rel="external nofollow" >積分:<em id="talval">0</em></a>
    <a class="endBtn" href="javascript:;" rel="external nofollow" rel="external nofollow" >結算</a>
  </div>

這真不曉得什么要特意說明，真要有的話，那底部的結算條，它是fixed 布局，固定在屏幕底部。

CSS 結構

    body {
      padding: 0;
      margin: 0;
      background-color: #fff;
      padding-bottom: 60px;
    }

    p {
      padding: 0;
      margin: 0;
    }

    ul,
    li {
      padding: 0;
      margin: 0;
      list-style: none;
    }

    a {
      text-decoration: none;
      color: #525252;
    }

    .fl {
      float: left;
    }

    .fr {
      float: right;
    }

    .clear::after {
      display: block;
      content: "";
      clear: both;
    }

    .seletProds>div {
      float: left;
      position: relative;
      text-align: center;
      border: 2px solid #d8d8d8;
      box-sizing: border-box;
      width: 30%;
      margin: 1.666%;
    }

    .seletProds p {
      font-size: 14px;
      line-height: 37px;
      border-top: 2px solid #d8d8d8;
      text-align: center;
      background-color: #fff;
      color: #525252;
    }

    .seletProds>div img {
      width: 80%;
    }

    .seletProds>div span {
      position: absolute;
      top: 0;
      right: 0;
      background: rgba(255, 92, 92, 0.79);
      padding: 0 3px;
      color: #fff;
      height: 17px;
      font-size: 12px;
    }

    .seletProds>div span em,
    .endBtnsWrp a em {
      font-style: normal;
    }

    .seletProds>div.on p {
      color: #fff;
      background-image: linear-gradient(-90deg, #53a0fe 0%, #5063ed 100%);
    }

    .endBtnsWrp {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
    }

    .endBtn {
      display: block;
      float: left;
      width: 50%;
      line-height: 50px;
      font-size: 17px;
      color: #fff;
      background: #4a4a4a;
      text-align: center;
    }

    .endBtnsWrp a:first-child {
      background: #646464;
      width: 60%;
    }

    .endBtnsWrp a:last-child {
      background-color: #fcc647;
      width: 40%;
    }

css3的屬性用了不少，因為這個項目的出發(fā)點就是手機端的。比如漸變背景，偽元素等。每個商品是通過浮動布局來實現(xiàn)的。

JS 結構

    var odivs = document.getElementById('selexWps').getElementsByTagName("div");
    var emTal = 0; // 這是總的積分數(shù)，初始為0
    for (var i = 0; i < odivs.length; i++) {
       // 先給每個點擊的項目添加個自定義屬性，以便區(qū)別點擊前和點擊后，剛開始是off
      odivs[i].setAttribute("clickv", "off");
      odivs[i].onclick = function() {
        // 點擊時，先獲取里面的積分文字，轉成數(shù)字類型
        var themVal = Number(this.getElementsByTagName("em")[0].innerText);
        // 這里判斷未點擊的點擊后，要處理的操作
        if (this.getAttribute("clickv") == "off") {
          emTal += themVal;
          this.className = "on";
          this.getElementsByTagName("p")[0].innerText = "已選擇";
          this.setAttribute("clickv", "on");
        } else {
         // 這里自然是已點擊過，再點擊的操作
          emTal -= themVal;
          this.className = "";
          this.getElementsByTagName("p")[0].innerText = "請選擇";
          this.setAttribute("clickv", "off");
        }
         // 這里自然是把點完后，變更的最終積分數(shù)添加到頁面的結算里
        document.getElementById("talval").innerText = emTal;
        //  console.log(emTal)
      }
    }

js 備注已添加，相對來說還算詳細，有興趣的小伙伴可以嘗試實驗下。加油吧?。?！

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

uniapp 對于scroll-view滑動和頁面滑動的聯(lián)動處理方法
這篇文章主要介紹了uniapp 對于scroll-view滑動和頁面滑動的聯(lián)動處理方法,本文通過示例代碼給大家介紹的非常詳細,感興趣的朋友一起看看吧
2024-08-08
如何用uni-app實現(xiàn)頂部導航欄顯示按鈕和搜索框
本文介紹了如何用uni-app實現(xiàn)頂部導航欄顯示按鈕和搜索框，感興趣的同學，可以參考下，并且試驗一下。
2021-06-06
canvas繪制一個常用的emoji表情
本文主要介紹了canvas繪制一個常用的emoji表情的示例代碼。具有很好的參考價值，下面跟著小編一起來看下吧
2017-03-03
avascript中的自執(zhí)行匿名函數(shù)應用示例
javascript中的自執(zhí)行匿名函數(shù)可以用它創(chuàng)建命名空間，只要把自己所有的代碼都寫在這個特殊的函數(shù)包裝內(nèi)，那么外部就不能訪問，除非你允許
2014-09-09
基于JavaScript實現(xiàn)大文件上傳后端代碼實例
這篇文章主要介紹了基于JavaScript實現(xiàn)大文件上傳后端代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2020-08-08
一文詳解如何處理JavaScript中的事件委托
事件委托是指將一個事件處理程序綁定到父元素上,而不是直接綁定到每個子元素上,下面就跟隨小編一起來了解一下JavaScript是如何處理事件委托的吧
2024-12-12
vue iView 上傳組件之手動上傳功能
iView 主要服務于 PC 界面的中后臺業(yè)務，是一套高質量的開源 UI 組件庫。這篇文章主要介紹了iView 上傳組件之手動上傳功能,需要的朋友可以參考下
2018-03-03
javascript設置和獲取cookie的方法實例詳解
這篇文章主要介紹了javascript設置和獲取cookie的方法,結合實例形式較為詳細的分析總結了JavaScript操作cookie簡單實現(xiàn)數(shù)據(jù)存儲與讀取的相關技巧,需要的朋友可以參考下
2016-01-01
js循環(huán)中使用正則失效異常的踩坑實戰(zhàn)
這篇文章主要給大家介紹了關于js循環(huán)中使用正則失效異常的踩坑實戰(zhàn),文中通過實例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2023-05-05
JavaScript操作XLSX文件的示例詳解
本文將深入探討如何使用強大的xlsx庫來操作Excel文件,本文將涵蓋如何在Node.js和瀏覽器環(huán)境中讀取Excel文件,創(chuàng)建新的Excel文件等內(nèi)容,感興趣的小伙伴可以了解下
2024-11-11