weui擷取checkbox選中值 帶GIF效果示範

效果示範

代碼如下

<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>