专栏首页编程微刊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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 复选框checkbox实现自定义样式

    在实际开发中,时长会遇到这样的问题,checkbox默认的样式有点难看,很多的时候,会更具ui设计图,来改变相应的checkbox的样式,这个时候就可以自定义一...

    祈澈菇凉
  • 复选框checkbox提交数据类型和方法

    对应的渲染方法如下: jQuery数据结构渲染(4):复选框checkbox赋值 https://www.jianshu.com/p/3878ff8c76d...

    祈澈菇凉
  • Vue项目新建一个路由页面

    2:打开App.vue {name:'/components/Test',navItem:'测试界面'},

    祈澈菇凉
  • Mui滑动实时获取值 安卓端

    素描
  • python技巧分享(七)

    songleo
  • 老男孩Python全栈开发(92天全)视频教程 自学笔记18

    玩蛇的胖纸
  • JQuery之复选框checkbox基本操作

    利用JQuery实现复选框的基本操作,例如全选、全部选、获取选中值、获取未选中值、获取选中长度等操作。 下面直接看例子,例子中有详细的介绍了JQuery是如何实...

    林老师带你学编程
  • Python 视频文件的分割和合并

    py3study
  • 一文读懂原码、反码、补码

    本文转载自: https://blog.csdn.net/u011488256/article/details/52204074 作者:僵尸男孩

    我的小碗汤
  • PostgreSQL入门

    这时相当于系统用户postgres以同名数据库用户的身份,登录数据库,这是不用输入密码的。如果一切正常,系统提示符会变为"postgres=#",表示这时已经进...

    老马

扫码关注云+社区

领取腾讯云代金券