复选框及回显

在对有选择复选框的页面进行修改的时候 要把修改前原数据回显过来,可以这样做 、如下:
主要是运用到了双循环进行
连个foreach循环中的item 都是在控制器中写好的。
其中第一个循环 表示的是所有的项 ,第二个循环 表示的是修改前选中的项

<div class="form-group col-lg-12">
    <label for="name" class="col-lg-2 control-label">要同步的表:</label>
        <div class="col-lg-8">
    <%-- <c:forEach items="${tableList}" var="table">
    <input type="checkbox" class="form-control" required value="${table}" name="tables" id="${table}">
        <label>${table}</label><br/>
    </c:forEach> --%>

    <c:forEach items="${tableList}" var="table">
        <input type="checkbox" name="tables" id="tables" value="${table}"
            <c:forEach items="${tableListChecked}" var="tableListChecked">
                <c:if test="${table == tableListChecked }">
                    checked
                </c:if>
            </c:forEach>
        />
        ${table }<br/>
    </c:forEach>
<!-- <input type='button' value='提交' onclick="fun()"/> -->
        </div>
</div>
### 使用 Bootstrap 实现带有回显功能的下拉复选框 为了实现带有回显功能的下拉复选框,可以利用 `bootstrap-select` 插件来增强标准的择器组件。下面展示了具体的实现方法。 #### 初始化择器插件 当页面加载完成时初始化 selectpicker 组件,并设置其属性以便更好地适应需求[^1]: ```javascript $(window).on('load', function () { $('#classification').selectpicker({ 'selectedText': 'cat', noneSelectedText: '请择分类' }); }); ``` 这段代码仅设置了未择项时显示的文字,还指定了已项如何展示给用户查看。 #### 设置初始值(即回显) 为了让控件能够正确反映之前保存的数据,在页面加载完毕之后需要根据服务器端传递过来的信息填充该字段。假设从服务端获取到的是一个 JSON 对象形式的商品列表数据,则可以通过如下方式处理[^2]: ```html <script th:inline="javascript"> var orderGoods = [[${orderGoods}]]; // 将字符串类型的 classification 转化成数组再赋值给 select 控件 $("#classification").val(orderGoods.classification.split(",")).trigger("change"); </script> ``` 这里需要注意一点:调用了 `.trigger("change")` 方法通知 `selectpicker` 更新视图状态以匹配新的 value 值。 #### 表单提交前验证 为了避免非法输入或遗漏必填项的情况发生,在表单提交之前应该加入必要的校验逻辑。对于这个例子来说就是确保至少有一个分类被勾了: ```javascript if ($.common.isEmpty($("#classification").val())) { $.modal.alertError("支付类型能为空"); } ``` 通过上述三步即可构建出既美观又实用的支持多回显良好的下拉菜单组件。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值