zoukankan      html  css  js  c++  java
  • MUI 实现类似购物车全选、单选功能

       <div class="mui-input-group" style="float:left; z-index: 1;top: 10px;">
             <div class="mui-input-row mui-checkbox mui-left">
                    <label></label>
                    <input name="checkbox" class="listCheckBox" value="@item.ID" type="checkbox">
               </div>
         </div>  

    <div id="downloadBar">
        <span></span>
        <div class="bar-item downloadbar-close">
            <div class="mui-input-row mui-checkbox mui-left">
                <label style=" padding-left: 39px;font-size:16px;">全选</label>
                <input type="checkbox" id="checkAll" style="left: 12px;top: 10px;">
            </div>
        </div>
        <div class="bar-item downloadbar-open" id="downloadbar">下单<label></label></div>
    </div>
    
      <script type="text/javascript">
    //点击全选按钮 var orderid = []; //数组存ID var chkall = document.getElementById('checkAll'); chkall.addEventListener('change', function (e) { var listBox = mui('.listCheckBox'); // var num = 0; //查看有多少条数据 if (e.target.checked) { //全选 listBox.each(function () { this.checked = true; orderid.push($(this).val()); //存入ID // num++; }) // console.log(num); var listBox = $(".listCheckBox:checked").length; $(".downloadbar-open label").text(listBox); } else { //取消全选 listBox.each(function () { this.checked = false; }) orderid = []; //清空所有ID $(".downloadbar-open label").text(0); } }) //单选 var chknum = 0; var cbknum = mui('.listCheckBox').length; var listCheckBox = $(".listCheckBox"); listCheckBox.each(function (i, btn) { btn.addEventListener("change", function () { if (this.checked) { chknum++; orderid.push($(this).val()); //存入ID } else { chknum--; orderid.remove($(this).val());//删除指定ID } if (cbknum == chknum) { //是否是全选判断 chkall.checked = true; } else { chkall.checked = false; } var listBox = $(".listCheckBox:checked").length; $(".downloadbar-open label").text(listBox); }) }) //删除指定数组元素 Array.prototype.remove = function (val) { var index = this.indexOf(val); if (index > -1) { this.splice(index, 1); } }; //下单按钮点击事件 document.getElementById("downloadbar").addEventListener("tap", function () { console.log(orderid); })
    </script>

      

  • 相关阅读:
    改了一下分辨率,Areo特效奇迹般的恢复了...
    此连接需要活动的Internet连接
    Apple Mac OS X每日一技巧026:Spotlight打开文件所在的文件夹
    WP7有约(八):在ListPicker控件的选择页面上播放铃声
    WP7有约(七):实现铃声设置的播放图标的效果
    WP7有约(五):回到主页
    WP7有约:一个应用的破蛋过程
    WP7有约(六):AppBarUtils使用指南
    IE与firefox事件处理
    C#试题
  • 原文地址:https://www.cnblogs.com/lemonmoney/p/11248329.html
Copyright © 2011-2022 走看看