zoukankan      html  css  js  c++  java
  • weui获取checkbox选中值 带GIF效果演示

    原文地址 :https://blog.csdn.net/qq_38832501/article/details/102864940

    <div class="weui-cells weui-cells_checkbox">
    <label class="weui-cell weui-check__label" for="s11044">
    <div class="weui-cell__hd">
    <input type="checkbox" class="weui-check" name="users" id="s11044" value="11044" onchange="changedo()">
    <i class="weui-icon-checked"></i>
    </div>
    <div class="weui-cell__hd"><img src="https://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTLprPoGXtyAfaOyvn2wdViaoKKibZeKQELQaibmukzK32jibfD8lxs3E4goUmd6rbxSPjcbdBcTfyXYIA/132" class="cellicon" style="margin-right: 0;"></div>
    <div class="weui-cell__bd">
    <p>wjlz</p>
    </div>
    </label>
    <label class="weui-cell weui-check__label" for="s11045">
    <div class="weui-cell__hd">
    <input type="checkbox" class="weui-check" name="users" id="s11045" value="11045" onchange="changedo()">
    <i class="weui-icon-checked"></i>
    </div>
    <div class="weui-cell__hd"><img src="https://wx.qlogo.cn/mmopen/vi_32/4wztH3ibG1iaicY1ATUtCWVAzSicDc4kFQpeSsnibGvIQ6m6y4h42xScw0JBgUMicRFRA00zdXUXU5qaIdsR5adbu3KA/132" class="cellicon" style="margin-right: 0;"></div>
    <div class="weui-cell__bd">
    <p>龙腾四海</p>
    </div>
    </label>
    <label class="weui-cell weui-check__label" for="s11046">
    <div class="weui-cell__hd">
    <input type="checkbox" class="weui-check" name="users" id="s11046" value="11046" onchange="changedo()">
    <i class="weui-icon-checked"></i>
    </div>
    <div class="weui-cell__hd"><img src="https://wx.qlogo.cn/mmhead/c7icMyZFV8t3uicRbVd6NVicLS1nueu7QgActp90IvQXBM/132" class="cellicon" style="margin-right: 0;"></div>
    <div class="weui-cell__bd">
    <p>许俊来</p>
    </div>
    </label>
    <label class="weui-cell weui-check__label" for="s11047">
    <div class="weui-cell__hd">
    <input type="checkbox" class="weui-check" name="users" id="s11047" value="11047" onchange="changedo()">
    <i class="weui-icon-checked"></i>
    </div>
    <div class="weui-cell__hd"><img src="https://wx.qlogo.cn/mmhead/H8MibpkXqyJtYwP0OsnDzArfQibEXc3zKic14PSflOdz0g/132" class="cellicon" style="margin-right: 0;"></div>
    <div class="weui-cell__bd">
    <p>许家芷</p>
    </div>
    </label>
    <label class="weui-cell weui-check__label" for="s11048">
    <div class="weui-cell__hd">
    <input type="checkbox" class="weui-check" name="users" id="s11048" value="11048" onchange="changedo()">
    <i class="weui-icon-checked"></i>
    </div>
    <div class="weui-cell__hd"><img src="https://wx.qlogo.cn/mmhead/flS6dJAtuf0ibGGRo2CeE12mBicMgNbx90MdE5RWDRPA0/132" class="cellicon" style="margin-right: 0;"></div>
    <div class="weui-cell__bd">
    <p>蒋维茜</p>
    </div>
    </label>
    </div>
    JS
    <script type="text/javascript">
    function changedo() {
    var len = $('input[name=users]:checked').length
    $('#selectnums').html(len)
    }
    function okdo() {
    var ids = '';
    $.each($('input:checkbox'),function(){
    if(this.checked){
    console.log($(this).val())
    ids += $(this).val() + ','
    }
    });
    console.log(ids)
    }
    </script> 
    View Code
  • 相关阅读:
    蓝桥杯--算法训练 区间k大数查询
    vijos1782:借教室
    vijos1779国王游戏
    C++大数模板
    HDU1042(N!:设4为基数)
    HDU1026(延时迷宫:BFS+优先队列)
    POJ3984(迷宫问题)
    HDU3018:Ant Trip(欧拉回路)
    HDU5438:Ponds(拓扑排序)
    2008北航:字符串匹配
  • 原文地址:https://www.cnblogs.com/hanxiaofei/p/13273919.html
Copyright © 2011-2022 走看看