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

设置复选框被选中

• 根据数据库查询的数据与input标签的title的值对比，相同则页面加载时默认被选中
• layui设置被选中后，必须要进行“更新渲染”后，复选框才会显示被选中，否则只是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的选中状态