欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

layui和jQuery根据数据库给复选框设置默认被选中checked

程序员文章站 2022-05-31 13:14:02
...

设置复选框被选中

layui和jQuery根据数据库给复选框设置默认被选中checked

  • 根据数据库查询的数据与input标签的title的值对比,相同则页面加载时默认被选中
  • layui设置被选中后,必须要进行“更新渲染”后,复选框才会显示被选中,否则只是checked改变,页面复选框无变化

更新渲染

layui和jQuery根据数据库给复选框设置默认被选中checked


1. 页面

<form id="form" class="layui-form" action="" method="post">
    <table id="recordsTable">
        <tr class="tr-h">
            <td class="w2-10">公司类型</td>
            <td colspan="6">
                <div>
                    <c:set value="0" var="status" scope="page"/>
                    <input type="checkbox" name="unitTypy" title="企业(分公司/其他)" lay-skin="primary"> 
                    <input type="checkbox" name="unitTypy" title="事业单位" lay-skin="primary"> 
                    <input type="checkbox" name="unitTypy" title="其他组织" lay-skin="primary"> 
                </div>
            </td>               
    </table>
</form>

2. script

<script> 
    layui.use([ 'layer', 'form', 'element' ], function() {
        var $ = layui.jquery, 
        layer = layui.layer, 
        form = layui.form, 
        element = layui.element;
        /* 自适应页面 */
        resizeTheWindow();
        /* 视窗变化监听 */
        window.onresize = function() {
            resizeTheWindow();
        }
        $(document).ready(function(){
            $.ajax({
                type: "GET",
                url: "${pageContext.request.contextPath}/***/***" ,
                dataType: "json",
                cache: false,
                async: false,
                success : function(data) {
                    //给公司类型赋值并设置默认选中
                    var unitType=[];
                    unitType=data.unittypy.split(",");
                    for(var j=0;j<unitType.length;j++){
                        var unitTypeCheckbox=$("input[name='unitTypy']");
                        for(var i=0;i<unitTypeCheckbox.length;i++){
                            if(unitTypeCheckbox[i].title==unitType[j]){
                                unitTypeCheckbox[i].value=unitType[j];
                                unitTypeCheckbox[i].checked=true;
                            }
                        }
                        form.render();  //更新渲染
                    }       
                },
                complete : function(XMLHttpRequest, textStatus) {},
                ifModified : false,
                error : function() {}
            });
        });
        /* 自适应页面 */
        function resizeTheWindow() {
            var screenWidth = parseInt(document.documentElement.clientWidth * 0.6);
            var surplusWidth = ((screenWidth - 210) > 754)?(screenWidth - 210):754;
            document.getElementById('contentContainer').style.width = surplusWidth + 'px';
        }
    });
</script>

jQuery设置checked的方法

  1. 设置复选框的选中或取消
$("[name='checkbox']").attr("checked",'true');//全选 

$("[name='checkbox']").removeAttr("checked");//取消全选

$("[name='checkbox']:even").attr("checked",'true');//选中所有奇数 
  1. 设置某个被选中
$("#input").prop("checked",true); 
$("[name='unittype']").prop("checked",true);
$("[name='checkbox1']").attr("checked",'true');  
  1. 判断复选框是否被选中
var isChecked = document.getElementById("share_all").checked; //js判断checkbox的选中状态

var isChecked = $("#checkbox_id").attr("checked")=="checked"; //jquery判断checkbox的选中状态