zoukankan      html  css  js  c++  java
  • input多选计算

    CSS代码:
    
    body {
      counter-reset: icecream;
    }
    input:checked {
      counter-increment: icecream;
    }
    .total::after {
      content: counter(icecream);
    }
    HTML代码:
    
    <strong>下面中国十大冰淇淋你吃过几个?</strong>
    <ol>
        <li><input type="checkbox" id="icecream1"><label for="icecream1">哈根达斯</label></li>
        <li><input type="checkbox" id="icecream2"><label for="icecream2">和路雪wall's</label></li>
        <li><input type="checkbox" id="icecream3"><label for="icecream3">八喜冰淇淋</label></li>
        <li><input type="checkbox" id="icecream4"><label for="icecream4">DQ冰淇淋</label></li>
        <li><input type="checkbox" id="icecream5"><label for="icecream5">蒙牛冰淇淋</label></li>
        <li><input type="checkbox" id="icecream6"><label for="icecream6">雀巢冰淇淋</label></li>
        <li><input type="checkbox" id="icecream7"><label for="icecream7">伊利冰淇淋</label></li>    
        <li><input type="checkbox" id="icecream8"><label for="icecream8">乐可可冰淇淋</label></li>
        <li><input type="checkbox" id="icecream9"><label for="icecream9">新城市冰淇淋</label></li>
        <li><input type="checkbox" id="icecream10"><label for="icecream10">明治MEIJI</label></li>
    </ol>
    你总共选择了 <strong class="total"></strong> 款冰淇淋! 
    复制代码
  • 相关阅读:
    在宏块级冗余可调的多描述视频编码算法方面取得进展(转载)
    C++单例模式
    C++手动实现库函数
    C#操作java平台生成的公钥
    C++之位操作符
    Windows 8 应用栏
    Windows 8 本地数据存储
    Win8的页面缓存
    操作符sizeof
    three.js结合geoJson绘制中国地图
  • 原文地址:https://www.cnblogs.com/520lin/p/5742787.html
Copyright © 2011-2022 走看看