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
  • 相关阅读:
    JAVA调用WCF
    写代码之前要做什么?
    漫谈界面和数据
    UIButton 简易的UI
    数据结构利器之私房STL(中)
    有趣的位运算
    基于TCP的C/S初级网络编程1
    数据结构利器之私房STL(上)
    Unix/Linux 那些系统启动后的进程
    【字符串匹配】KMP算法之道
  • 原文地址:https://www.cnblogs.com/hanxiaofei/p/13273919.html
Copyright © 2011-2022 走看看