当前位置： 移动技术网 > IT编程>开发语言>JavaScript > Js自定义多选框效果的实例代码

Js自定义多选框效果的实例代码

2017年12月12日  | 移动技术网IT编程  | 我要评论

前端入坑纪 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的属性用了不少，因为这个项目的出发点就是手机端的。比如渐变背景，伪元素等。每个商品是通过浮动布局来实现的。

js 结构

    var odivs = document.getelementbyid('selexwps').getelementsbytagname("div");
    var emtal = 0; // 这是总的积分数，初始为0
    for (var i = 0; i < odivs.length; i++) {
       // 先给每个点击的项目添加个自定义属性，以便区别点击前和点击后，刚开始是off
      odivs[i].setattribute("clickv", "off");
      odivs[i].onclick = function() {
        // 点击时，先获取里面的积分文字，转成数字类型
        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");
        }
         // 这里自然是把点完后，变更的最终积分数添加到页面的结算里
        document.getelementbyid("talval").innertext = emtal;
        //  console.log(emtal)
      }
    }

js 备注已添加，相对来说还算详细，有兴趣的小伙伴可以尝试实验下。加油吧！！！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网