图片展示：

css代码：

注：label标签定位在复选框上

input[type="checkbox"]{
    display: none;
}
label{
    position: relative;
    display: inline-block;
    z-index: 1;
    border: 1px solid #b8b8b8;
    margin-left: 10px;
    border-radius: 4px;
    width: 12px;
    height: 12px;
    cursor: pointer;
    top:30px;
}

.box{

       position: absolute;

       z-index: 0;

       left: -20px;

      top: -20px;

}

js代码：

//json数据：

var orderInfo = {

    "pros": [
        {
        "userName": "zhangsan",
        "name": "PLA",
        "lenght": "3.05",
        "width": 5.81,
        "height": 1.96,
        "price": 25,
        "count": 1,
        "owner": "1"
        },
        {
            "userName": "lisi",
            "name": "PLA",
            "lenght": "3.05",
            "width": 5.81,
            "height": 1.96,
            "price": 25,
            "count": 1,
            "owner": "1"
        },
    ],
}

var  datainfo=orderInfo.pros;

//动态遍历复选框和label标签：

$.each(datainfo ,function(i,e){   //data是json数据

var $li = '<li><input type="checkbox" class="box"><label class="boxlabel"></label></li>';

//使用动态数据举例

var $p = '<p>' + e.price + '</p>'

//将p标签append到页面所需标签内即可

$suibian.append($p);

})

//复选框id名与其label标签for属性一一绑定

$box = $('.box');
$box.each(function (v) {
    $(this).attr("id","box"+v);
    $(this).next('label').attr("for","box"+v);
})