layui radio点击事件实现input显示和隐藏的例子

定义目录标题)

实列

记录一些工作有趣的事，让生活多点乐趣，打工人打工魂，打工都是人上人！哈哈！别让上班那么枯燥乏味。

代码部分

<div class="layui-form-item" pane>
                        <label class="layui-form-label">审批</label>
                        <div class="layui-input-block" id="hideing">
                            <input type="radio" name="po_opinion_status" lay-filter="hides"  value="1" title="同意" checked />
                            <input type="radio" name="po_opinion_status" lay-filter="hides"  value="2" title="驳回" />
                            <input type="radio" name="po_opinion_status" lay-filter="hides"  value="3" title="流转" />
                        </div>
                    </div>

 <div class="layui-form-item count" style="display: none">
                        <label class="layui-form-label">流转人</label>
                        <div class="layui-input-inline">
                            <select class="layui-input-inline" lay-verify="required" name="po_sign_release_charger_id" lay-search>
                                <c:forEach items="${users}" var="item">
                                    <option value="${item.id}">${item.name}</option>
                                </c:forEach>
                            </select>
                        </div>
                    </div>

这是页面效果
下面是script部分

<script type="text/javascript">
layui.config({
        base : '${pageContext.request.contextPath }/layuiadmin/' //静态资源所在路径
    })
        .extend({
            index : 'lib/index' //主入口模块
        })
        .use(
            [ 'index', 'form' ,'admin','jquery','userselect','table','workFlow'],
            function() {
                var $ = layui.$,
                    admin = layui.admin,
                    form = layui.form,
                    
                 
   form.on('radio(hides)',function (data) {
                var val = $('input:radio[name="po_opinion_status"]:checked').val();
                console.log(val);
                if(val == 1) {
                    //点击通过后隐藏此模块
                    $(".count").hide();
                } else if(val == 2) {
                    //点击驳回后隐藏此模块
                    $(".count").hide();
                }else if(val == 3) {
                    //点击流转后展示此模块
                    $(".count").show();
                }
            })
          })
            <script/>

页面图效果点击同意或者驳回会自动隐藏，其实就在input加了个style=“display: none”，

点击到流转的时候会自动显示