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

前端入坑纪 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 备注已添加,相对来说还算详细,有兴趣的小伙伴可以尝试实验下。加油吧!!!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • JS 实现列表与多选框选择附预览动画

    1功能预览 2html代码 <span> <tr> <td><img onclick="addType()" src="${msUrl}/images/logo/add.png">产品范围:</td> <td><select id="selectTypeOne" class="easyui-combobox" data-options="r

  • JavaScript判断表单中多选框checkbox选中个数的方法

    本文实例讲述了JavaScript判断表单中多选框checkbox选中个数的方法.分享给大家供大家参考.具体如下: 这里使用JavaScript检测并判断出表单中多选框的选中个数,也就是checkbox被选择了多少,在以前,这个问题经常被各大论坛问到,因为检测checkbox不像检测输入框那么简单,尤其是判断个数也经常会遇到,所以说觉得这个Js代码还是很有用的,大家有兴趣的再完善一下. 运行效果如下图所示: 在线演示地址如下: http://demo.jb51.net/js/2015/js-ch

  • html+javascript+bootstrap实现层级多选框全层全选和多选功能

    想做一个先按层级排序并可以多选的功能,首先倾向于用多层标签式的,直接选定加在文本域里, 查到这文,非常详细,如果大家需要做前面所说的功能,可以参考这个地址,http://mrthink.net/jquery-plugin-iselecttags/ 但是,考虑到如果要做一个选项数不确定.可能非常多,用标签会容易视觉疲劳,同时要求随着选项数的变化,最小程度影响网页布局和效果,于是选择用层级的多选框,也就是设置电脑的那种常见效果.第二层选项可以折叠/展开到第一层下面,用bootstrap的 data-

  • 用原生JS实现简单的多选框功能

    废话不多说了,直接给大家贴代码了,具体代码如下所示: <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> </head> <body> <input id="cheakAll" type="checkbox">全选 <div> <

  • 用 Javascript 验证表单(form)中多选框(checkbox)值

    本文介绍了一个较为通用的获取 checkbox 值的方法,希望对新手有用. 复制代码 代码如下: <script type="text/javascript"> // 说明: 用 Javascript 验证表单(form)中多选框(checkbox)的值 // 作者: CodeBit function getCheckboxValue(checkbox) { if (!checkbox.length && checkbox.type.toLowerCase(

  • javascript 单选框,多选框美化代码

    crir = {     init: function() {         arrLabels = document.getElementsByTagName('label'); searchLabels:         for (var i=0; i<arrLabels.length; i++) {                         // get the input element based on the for attribute of the label tag   

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

    前端入坑纪 27 工作中的一个多选效果,感觉不算太难,就上传来分享下. 以上图文,纯属测试,如有雷同,请勿当真 HTML 结构 <div id="selexWps" class="seletProds clear"> <div> <span>积分<em>5000</em></span> ![](wrap/img/pic.png) <p>请选择</p> </div&g

  • 基于MFC实现自定义复选框效果

    目录 介绍 功能实现 介绍 什么叫做复选框? 复选框是一种可同时选中多项的基础控件,主要是有两种明显的状态:选中与非选中. 在我们实际开发过程中,单纯的系统边框已经无法满足对界面显示需求了,这时需要采用自定义图片进行展示,那么展示效果是如何呢? 对于我们MFC框架来说,想要实现一个自定义的控件很难,一般情况下采用自绘的方式实现.对于Check控件来说,也是如此. 功能实现 复选框父类:CButton 当我们从资源视图中拖出来一个控件并绑定成员变量后,当前复选框的父类便是CButton. 这里,假

  • 微信小程序实现多选框功能的实例代码

    我们先来看看效果: 两种状态: 选中/不选中 wxml <!-- 选择 S --> <view wx:for="{{riderCommentList}}" wx:for-item="item" wx:key="index" bindtap="checkboxChange" data-value="{{item.value}}" data-index="{{index}}"

  • vue项目中仿element-ui弹框效果的实例代码

    最近要写个弹框,发现element-ui弹框样式还可以,就copy下来改吧改吧.也不分步骤详细介绍了直接上代码. 在组件目录中新建文件夹message 我把message目录里的东西给大家贴出来 message文件夹 src文件夹 index.js import Message from './src/main.js'; export default Message; mian.js import Vue from 'vue'; import Main from './main.vue'; le

  • Java如何做带复选框的菜单实例代码

    说明:         上面是我用Java做的扫雷游戏,其中就用到了带复选框式的菜单,原来也是用JCheckBoxMenuItem做的,但发现实在是问题多多,后干脆就用普通的JMenuItem来做,效果也不错.实际上说穿了很简单,就是在菜单的文本上做文章,前面加上一个 √ 即可.通过比较文本内容来判断是显示选中还是未选中,前面加还是不加 √ ,同时其他的文本内容如何变化,就好像扫雷的难度,初级.中级.高级只能选中一个. 代码: package com.game.mine; import java

  • 模拟多级复选框效果的jquery代码

    今天又次体会到jquery的强大了,做了个多级复选框的效果,代码总共就20+行就over了. 我又想用js来做一个看看,才写了几个方法就写不动了,兼容性要考虑很多,而且代码量直线上升. 主要分享下jquery的这个效果的实现.代码块分两块: 一是全选的效果,就是点击全选的复选框时它的子孙都相应被选中或者未选中.这人很好做,代码如下: 复制代码 代码如下: evtEle.parent().next(".checks").find("input:checkbox").a

  • Android 实现抖音头像底部弹框效果的实例代码

    布局文件 activity_test.xml <?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"

  • Bootstrap提示框效果的实例代码

    本文介绍了Bootstrap提示框,分享给大家,顺便也给自己留个笔记 前面的话 提示框是一个比较常见的功能,一般来说是鼠标移动到特定元素上时,显示相关的提示语.本文将详细介绍Bootstrap提示框 基本用法 Bootstrap框架中的提示框,结构非常简单,常常使用的是按钮<button>标签或者链接<a>标签来制作.不管是使用按钮还是链接来制作提示框,他们都需要满足下列条件: 1.通过 title 属性的值来定义提示信息(也可以使用自定义属性 data-original-titl

  • JS延时器提示框的应用实例代码解析

    废话不多说了,直接给大家贴代码了,具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>延时显示提示框</title> <style> #div1 { float: left; width: 60px; height: 60px; background-color: aqua;

  • 小程序自定义弹出框效果

    本文实例为大家分享了小程序自定义弹出框效果的具体代码,供大家参考,具体内容如下 my-pop----api: title ------字符串---------自定义弹窗标题context ------字符串---------自定义弹窗内容cancelTxt ------字符串---------取消按钮文本cancelCor ------字符串---------取消按钮颜色inp ------布尔值---------true文本弹出框---------fasle默认弹出框okTxt ------字

随机推荐