Fork me on GitHub

WeUI

官网

https://weui.io/

引入js和css

<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1"/>

        <link rel="stylesheet" href="https://weui.io/style/weui.css" type="text/css"></link>
        <script src="https://res.wx.qq.com/t/wx_fed/cdn_libs/res/weui/1.2.5/weui.min.js" type="text/javascript"></script>

    </head>
</html>

form表单

input批量回显

https://www.cnblogs.com/aeolian/p/16174302.html

radio单选框

weui的radio设置value属性后无效，渲染后只有value这个key没有值。所以得在每个radio上面放不一样的id然后在添加一个隐藏的input。

<input name="ischarge" id="ischargeHiden" hidden>

<div class="weui-cells weui-cells_radio">
    <label class="weui-cell weui-cell_active weui-check__label" style="float:left;">
        <label class="weui-label">
            是否收费
        </label>
        <div class="weui-cell__bd">
            <p>收费</p>
        </div>
        <div class="weui-cell__ft">
            <input type="radio" class="weui-check" name="ischargeRadio" id="ischarge1" value="1" checked />
            <span class="weui-icon-checked"></span>
        </div>
    </label>
    <label class="weui-cell weui-cell_active weui-check__label" for="ischarge0" style="float:left;">
        <div class="weui-cell__bd">
            <p>免费</p>
        </div>
        <div class="weui-cell__ft">
            <input type="radio" class="weui-check" name="ischargeRadio" value="0" id="ischarge0" >
            <span class="weui-icon-checked"></span>
        </div>
    </label>
</div>

<script type="text/javascript">
/*第一个选项点击触发*/
$('#ischarge1').click(function () {
    $('#ischargeHiden').val(1);
    submitInfo("ischarge","1");
    //显示其他div
    $('#billingDiv').show();
});
/*第二个选项点击触发*/
$('#ischarge0').click(function () {
    $('#ischargeHiden').val(0);
    submitInfo("ischarge","0");
    //隐藏其他div
    $('#billingDiv').hide();
});
</script>
posted @ 2021-09-18 16:14  秋夜雨巷  阅读(298)  评论(0)    收藏  举报