jQuery数据结构渲染(4):复选框checkbox赋值

简介: jQuery数据结构渲染(4):复选框checkbox赋值

1:当返回值是字符串的时候

data.json:

{   
    "circle": "2;3;4;5;6;1" 
}

示例代码:

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
    <head>
        <title>复选框checkbox自定义样式</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
        <script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
        <style>
            input[type=checkbox]{
                    appearance:none;
                    -moz-appearance:none; /* Firefox */
                    -webkit-appearance:none;                 
                    cursor: pointer;
                    margin:0;
                }                   
                input[type=checkbox]{
                    width:13px;
                    height:13px;                  
                    background: url(images/check.png);
                    background-size: 100% 100%;
                }           
                input[type=checkbox]:checked{
                    background: url(images/checked.png);
                    background-size: 100% 100%;
                }
    </style>
    </head>
    <body>
        <div class="modal-body form">
            <div class="col-md-7 col-sm-7  col-xs-7">
                <input name="circle" type="checkbox" value="2" />周一
                <input name="circle" type="checkbox" value="3" />周二
                <input name="circle" type="checkbox" value="4" />周三
                <input name="circle" type="checkbox" value="5" />周四
                <input name="circle" type="checkbox" value="6" />周五
                <input name="circle" type="checkbox" value="7" />周六
                <input name="circle" type="checkbox" value="1" />周日
            </div>
        </div>
    </body>
    <script type="text/javascript">
        $.ajax({
            url: "data.json",
            type: 'GET',
            dataType: 'json',
            success: function(data) {
                $.each(data.circle.split(";"), function(i, item) {
                    $('input[name="circle"][value="' + item + '"]').attr('checked', 'checked')                              
                }) 
            }
        });
    </script>
</html>

2:当返回值是数组对象的时候

data.json:

{   
    "tasks": [{
        "id": 1,
        "name": "任务一"       
    }, {
        "id": 2,
        "name": "任务二"       
    },{
        "id": 3,
        "name": "任务三"       
    },{
        "id": 4,
        "name": "任务四"       
    }]
}

参考代码:

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
    <head>
        <title>复选框赋值</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
        <script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
        <style>
            input[type=checkbox]{
                    appearance:none;
                    -moz-appearance:none; /* Firefox */
                    -webkit-appearance:none;                 
                    cursor: pointer;
                    margin:0;
                }                   
                input[type=checkbox]{
                    width:13px;
                    height:13px;                  
                    background: url(images/check.png);
                    background-size: 100% 100%;
                    margin-right:8px;
                }           
                input[type=checkbox]:checked{
                    background: url(images/checked.png);
                    background-size: 100% 100%;
                }
    </style>
    </head>
    <body>
        <div class="workQueryList">
        </div>
    </body>
    <script type="text/javascript">
        $.ajax({
            url: "data.json",
            type: 'GET',
            dataType: 'json',
            success: function(data) {
                //checkbox渲染
                var htmlQuery = "";
                $.each(data.tasks,function(i, item) {
                    htmlQuery += '<input name="query" type="checkbox" checked="checked" value="' + item.id + '" /><span>'
                    + item.name
                    + '</span></br>';
                })
                $(".workQueryList").html(htmlQuery)
            }
        });
    </script>
</html>

显示如下


3:当返回值是数组字符串的时候

{
    "permTokens": ["site", "alarm", "distribution", "my"],  
}

示例代码

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
    <head>
        <title>复选框赋值</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
        <script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
        <style>
            input[type=checkbox]{
                    appearance:none;
                    -moz-appearance:none; /* Firefox */
                    -webkit-appearance:none;                 
                    cursor: pointer;
                    margin:0;
                }                   
                input[type=checkbox]{
                    width:13px;
                    height:13px;                  
                    background: url(images/check.png);
                    background-size: 100% 100%;
                    margin-right:8px;
                }           
                input[type=checkbox]:checked{
                    background: url(images/checked.png);
                    background-size: 100% 100%;
                }
    </style>
    </head>
    <body>
        <div class="col-md-5 col-sm-5  col-xs-5  workModelList">
            <input type="checkbox" name='appModel' value="site">位置
            <input type="checkbox" name='appModel' value="alarm">告警
            <input type="checkbox" name='appModel' value="distribution">分布
            <input type="checkbox" name='appModel' value="my">我的
            <input type="checkbox" name='appModel' value="work">作业管理
            <input type="checkbox" name='appModel' value="partol">电子巡更
            <input type="checkbox" name='appModel' value="person">员工管理
        </div>
    </body>
    <script type="text/javascript">
        $.ajax({
            url: "data.json",
            type: 'GET',
            dataType: 'json',
            success: function(data) {
                $.each(data.permTokens, function(i, item) {
                    $('input[value="' + item + '"]').attr("checked", "checked")
                })
            }
        });
    </script>
</html>

相关文章
|
1月前
|
JavaScript 前端开发
jquery怎么给循环出来的列表(类似于text框)取值和赋值
jquery怎么给循环出来的列表(类似于text框)取值和赋值
13 0
jquery怎么给循环出来的列表(类似于text框)取值和赋值
|
2月前
|
存储 Java
数据结构:图文详解顺序表的各种操作(新增元素,查找元素,删除元素,给指定位置元素赋值)
数据结构:图文详解顺序表的各种操作(新增元素,查找元素,删除元素,给指定位置元素赋值)
55 0
|
3月前
|
JSON JavaScript 数据格式
jQuery将json性别数据int类型进行格式化渲染
jQuery将json性别数据int类型进行格式化渲染
21 0
|
3月前
|
JavaScript
jQuery数据渲染,每行显示4个数据,超过四条数据自动换行
jQuery数据渲染,每行显示4个数据,超过四条数据自动换行
18 0
|
3月前
|
JSON JavaScript 数据格式
jQuery数据结构渲染(3):文本和input/textarea框赋值
jQuery数据结构渲染(3):文本和input/textarea框赋值
21 1
|
4月前
|
JavaScript
Jquery插件知识之Jquery.cookie实现页面传值
Jquery插件知识之Jquery.cookie实现页面传值
32 0
|
5月前
|
JavaScript
jQuery 插件自用列表
jQuery 插件自用列表
26 0
|
1月前
|
JavaScript
jQuery图片延迟加载插件jQuery.lazyload
jQuery图片延迟加载插件jQuery.lazyload
|
1月前
|
JavaScript 前端开发
开发jQuery插件这些就够了
开发jQuery插件这些就够了
17 0
|
6月前
|
JavaScript
jQuery编写插件的两种方法
jQuery编写插件的两种方法
52 0

相关产品

  • 云迁移中心