無法基於Ajax響應設置複選框屬性真假

Question

基於Ajax響應我試圖檢查或取消選中複選框，我已經嘗試過這種方式

var jsonresponse = { 
     "packs": [ 
     { 
       "pac_newflag": "no" 
     }, 
     { 
       "pac_newflag": "yes" 
     }] 
} 


var html = ''; 
$(document).ready(function() 
{ 
     for (var i = 0; i < jsonresponse.packs.length; i++) 
     { 
       var pac_newflag = jsonresponse.packs[i].pac_newflag; 
       var checkboxchecked = 'false' 
       if (pac_newflag === 'yes') 
       { 
         checkboxchecked = 'true' 
       } 
       else 
       { 
         checkboxchecked = 'false' 
       } 
       html += '<label class="checkbox"><input type="checkbox" value=checkboxchecked /> Featured</label>'; 
     } 
     $("#testdiv").html(html); 
}); 

，這是我的小提琴

http://jsfiddle.net/cod7ceho/121/

可否請你讓我知道如何與這條線做

Answer 1

爲了使複選框ç嘿嘿，你正在傳遞真正的價值，這是完全錯誤的。

您應該在JavaScript變量中創建屬性，並且必須添加到HTML中。

請檢查以下代碼片段瞭解更多詳情。

var jsonresponse = { 
 
    "packs": [ 
 
    { 
 
     "pac_newflag": "no" 
 
    }, 
 
    { 
 
     "pac_newflag": "yes" 
 
    }] 
 
} 
 

 

 
var html = ''; 
 
$(document).ready(function() 
 
        { 
 
    for (var i = 0; i < jsonresponse.packs.length; i++) 
 
    { 
 
    var pac_newflag = jsonresponse.packs[i].pac_newflag; 
 
    var checkboxchecked = ''; 
 
    if (pac_newflag === 'yes') 
 
    { 
 
     checkboxchecked = 'checked="checked"' 
 
    } 
 
    else 
 
    { 
 
     checkboxchecked = '' 
 
    } 
 
    html += '<label class="checkbox"><input type="checkbox" '+checkboxchecked+' /> Featured</label>'; 
 
    } 
 
    $("#testdiv").html(html); 
 
});

.pageMidLogo { 
 
    width:100%; 
 
    float:left; 
 
    text-align:center; 
 
} 
 
.createAccountWrap { 
 
    width:100%; 
 
    float:left; 
 
    height:auto; 
 
    padding:20px; 
 
} 
 
.createAccountWrap .h3_head { 
 
    float: left; 
 
    text-align: center; 
 
    width: 100%; 
 
    margin-bottom: 25px !important; 
 
} 
 
.iLabel { 
 
    font-size: 13px; 
 
    line-height: 16px; 
 
    width: 100%; 
 
    float: left; 
 
} 
 
.insideInput { 
 
    width:100%; 
 
    float:left; 
 
    position:relative; 
 
} 
 
.tooltipIcon { 
 
    width: 27px; 
 
    height: 27px; 
 
    position: absolute; 
 
    right: 8px; 
 
    top: 16px; 
 
    background: #ababab; 
 
    -webkit-border-radius: 25px; 
 
    border-radius: 25px; 
 
} 
 
.tooltipIcon:before { 
 
    font-size: 19px; 
 
    margin-top: 4px; 
 
    color:#fff; 
 
} 
 
.pop_tooltipIcon { 
 
    font-size: 36px; 
 
    text-align: center; 
 
    width: 100%; 
 
    float: left; 
 
    margin-bottom: 10px; 
 
    color:#d03e43; 
 
} 
 
.iconPinReload { 
 
    /*background: url(../images/icon-capthareload.png) 10px 10px no-repeat #f6f6f6; 
 
\t border-left: 1px solid #ddd; 
 
\t width: 52px; 
 
\t height: 41px;*/ 
 
    position: absolute; 
 
    top: -20px; 
 
    right: 0px; 
 
    cursor: pointer; 
 
    font-size: 15px; 
 
} 
 
/*.iconPinReload:hover{ 
 
\t background: url(../images/icon-capthareload.png) 10px 10px no-repeat #f0f0f0; 
 
}*/ 
 
.tpMenuWrap { 
 
    position:absolute; 
 
    top:0px; 
 
    width: 88%; 
 
} 
 
.btMenuWrap { 
 
    position:absolute; 
 
    bottom:0px; 
 
    width: 88%; 
 
} 
 
.ul_menu { 
 
    padding:0px; 
 
    margin:0px; 
 
    width:100%; 
 
    list-style:none; 
 
} 
 
.ul_menu li { 
 
    padding: 10px 0px; 
 
    margin: 0px; 
 
    width: 100%; 
 
    list-style: none; 
 
    font-size: 24px; 
 
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); 
 
} 
 
.ul_menu li a { 
 
    font-weight: 500; 
 
    color:#ddd; 
 
} 
 
.ul_menu li a:hover { 
 
    color:#fff; 
 
} 
 
.panelCloseBtn { 
 
    float: right; 
 
    margin-bottom: 15px; 
 
    width: 100%; 
 
    text-align: right; 
 
    margin-top: 15px; 
 
    font-size: 20px; 
 
    color: #777 !important; 
 
} 
 
.panelCloseBtn:hover { 
 
    color: #999 !important; 
 
} 
 
.homeListMenuWrap { 
 
    padding:0px !important; 
 
    margin:0px; 
 
    width:100%; 
 
    list-style:none; 
 
} 
 
.homeListMenuWrap li { 
 
    padding:25px 25px 20px 25px; 
 
    margin:0px; 
 
    width:100%; 
 
    list-style:none; 
 
    border-bottom:1px solid #ddd; 
 
} 
 
.homeListMenuWrap li a:hover { 
 
    color:#d03e43; 
 
} 
 
.homeListMenuWrap li .qrcode { 
 
    background:url(../images/icon-QRcode.png) left top no-repeat; 
 
    padding-left: 120px; 
 
    display: block; 
 
    color:#314158; 
 
    min-height:110px; 
 
} 
 
.homeListMenuWrap li .homedeliver { 
 
    background:url(../images/icon-homedelivery.png) left top no-repeat; 
 
    padding-left: 120px; 
 
    display: block; 
 
    color:#314158; 
 
    min-height:110px; 
 
} 
 
.homeListMenuWrap li .qrcode p, .homeListMenuWrap li .homedeliver p { 
 
    font-size:15px; 
 
} 
 
.qrcode_errorWrap { 
 
    width:100%; 
 
    float:left; 
 
    height:auto; 
 
    padding:20px; 
 
} 
 
.qrcode_errorWrap .qrcodeError { 
 
    float: left; 
 
    text-align: center; 
 
    width: 100%; 
 
    font-size:26px !important; 
 
    margin-bottom: 25px !important; 
 
    font-weight: 400 !important; 
 
} 
 
.orDivider { 
 
    width: 100%; 
 
    float: left; 
 
    text-align: center; 
 
    font-size: 22px !important; 
 
    font-style: italic; 
 
    position:relative; 
 
    margin: 25px 0; 
 
} 
 
.orDivider span { 
 
    background: #fff; 
 
    position: relative; 
 
    z-index: 1; 
 
    padding: 0 15px; 
 
} 
 
.orDivider .hr { 
 
    position: absolute; 
 
    top: 5px; 
 
    width: 100%; 
 
    background: #eee; 
 
    border: 1px solid #eee; 
 
} 
 
/* Tree Menu Start */ 
 
.TreeMenu { 
 
    width:100%; 
 
} 
 
.TreeMenu .ui-collapsible-heading { 
 
    margin:0px !important; 
 
} 
 
.TreeMenu .ui-collapsible-heading a { 
 
    border-left:0px; 
 
    border-right:0px; 
 
    border-bottom:1px solid #e6e6e6; 
 
    border-top:1px solid #e6e6e6; 
 
    border-radius: 0px; 
 
} 
 
.TreeMenu .ui-collapsible-heading-toggle { 
 
    font-size:20px; 
 
} 
 
.TreeMenu .ui-collapsible-content { 
 
    margin: 0; 
 
    padding: 0px 20px; 
 
    border: 0px !important; 
 
    background: #fff; 
 
} 
 
.TreeMenu_Content { 
 
    width:100%; 
 
    height:auto; 
 
    padding: 15px 0px 0px 0px; 
 
    display: inline-block; 
 
} 
 
.TreeMenu_Content .lastItm_Wrap { 
 
    width:100%; 
 
    float:left; 
 
    height:auto; 
 
    margin-bottom:5px; 
 
} 
 
.TreeMenu_Content .lastItm_Wrap .Itm_left_aside { 
 
    width:60%; 
 
    float:left; 
 
} 
 
.TreeMenu_Content .lastItm_Wrap .Itm_dtsl { 
 
    width:75%; 
 
    float:left; 
 
} 
 
.TreeMenu_Content .lastItm_Wrap .Itm_dtsl .vegLabel { 
 
    background:url(../images/veg_labels.png) left 3px no-repeat; 
 
    padding-left: 25px; 
 
} 
 
.TreeMenu_Content .lastItm_Wrap .Itm_dtsl .nonvegLabel { 
 
    background:url(../images/nonveg_labels.png) left 3px no-repeat; 
 
    padding-left: 25px; 
 
} 
 
.TreeMenu_Content .lastItm_Wrap .Itm_dtsl h3 { 
 
    font-size:16px; 
 
    white-space: nowrap; 
 
    width: 100%; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    position:relative; 
 
    padding-right: 50px; 
 
} 
 
.TreeMenu_Content .lastItm_Wrap .Itm_dtsl h3 .prdDiscription { 
 
    position: absolute; 
 
    right: 0px; 
 
    top: 1px; 
 
    width: auto !important; 
 
    border-radius: 20px; 
 
    padding: 0px 8px; 
 
    font-size: 14px; 
 
    margin: 0px; 
 
} 
 
.TreeMenu_Content .lastItm_Wrap .Itm_dtsl .addonsList { 
 
    font-size: 14px; 
 
    opacity: 0.7; 
 
    width: 100%; 
 
    float: left; 
 
} 
 
.TreeMenu_Content .lastItm_Wrap .Itm_img { 
 
    width:74px; 
 
    height:74px; 
 
    float:left; 
 
    background:#ddd; 
 
    margin-right:10px; 
 
    overflow:hidden; 
 
} 
 
.TreeMenu_Content .lastItm_Wrap .Itm_img img { 
 
    width:100%; 
 
    float:left; 
 
    height:100%; 
 
    border:0px; 
 
} 
 
.TreeMenu_Content .lastItm_Wrap .Itm_right_aside { 
 
    width:30%; 
 
    float:right; 
 
    text-align:right; 
 
} 
 
.TreeMenu_Content .lastItm_Wrap .Itm_right_aside .trashBtn { 
 
    font-size:20px; 
 
} 
 
.TreeMenu_Content .lastItm_Wrap .Itm_right_aside p { 
 
    font-size:16px; 
 
} 
 
.TreeMenu_Content .lastItm_Wrap .Itm_right_aside p strike { 
 
    margin-right:10px; 
 
} 
 
.TreeMenu_Content .lastItm_Wrap .Itm_right_aside p b { 
 
    font-weight:600; 
 
} 
 
/* Tree Child */ 
 
.TreeMenuChild .ui-collapsible-content { 
 
    padding:0px; 
 
} 
 
.TreeMenuChild .ui-icon-plus:after { 
 
    background-image: url(images/icons-png/carat-r-black.png) !important; 
 
} 
 
.TreeMenuChild .ui-icon-minus:after { 
 
    background-image: url(images/icons-png/carat-d-white.png) !important; 
 
    background-color:#d03e43; 
 
} 
 
.TreeMenuChild .ui-collapsible-heading-toggle { 
 
    background-color:#fff !important; 
 
    font-size:18px; 
 
} 
 
.TreeMenuChild .ui-collapsible-heading-toggle:last-child { 
 
    margin-top:-1px; 
 
} 
 
.addonsBtn { 
 
    width: auto !important; 
 
    float: left; 
 
    padding: 5px 20px; 
 
    border-radius: 20px !important; 
 
    font-size:13px; 
 
} 
 
.addonsBtn a { 
 
    color:#333 !important; 
 
} 
 
.Itm_discrp { 
 
    width:100%; 
 
    float:left; 
 
    height:auto; 
 
    margin-top:10px; 
 
} 
 
.Itm_discrp h3 { 
 
    margin-bottom: 10px !important; 
 
    padding: 0px; 
 
} 
 
.Itm_discrp p { 
 
    text-align: justify; 
 
} 
 
.Qty_Wrap { 
 
    width:100%; 
 
    float:left; 
 
} 
 
.Qty_Wrap .QtyBtn { 
 
    float: left; 
 
    width: 33px; 
 
    border-radius: 34px; 
 
    padding: 5px; 
 
    font-size: 14px; 
 
} 
 
.Qty_Wrap .QtyBtn:before { 
 
    margin-top:4px; 
 
} 
 
.Qty_Wrap .ui-input-text { 
 
    float: left; 
 
    border: 0px; 
 
    box-shadow: none; 
 
    background: #fff; 
 
    width: 50px; 
 
    font-size: 24px; 
 
    padding: 0px; 
 
    margin: 0px 2px 0px 0px; 
 
    text-align: center; 
 
} 
 
.Qty_Wrap .QtyInput { 
 
    float: left; 
 
    width: 100%; 
 
    padding: 0px; 
 
    margin: 0px; 
 
    text-align: center; 
 
    min-height: 1.6em; 
 
} 
 
.addonsContent h2 { 
 
    font-size:18px; 
 
} 
 
.addonsContent .rightAction { 
 
    float: right; 
 
    font-size: 13px; 
 
    margin-top: -28px; 
 
} 
 
.addonsContent .rightAction a { 
 
    padding-right:20px; 
 
} 
 
.addonsContent .rightAction a.tick { 
 
    font-size: 22px; 
 
    padding-right:0px; 
 
} 
 
.addonsContent .rightAction a.remove { 
 
    color:#333; 
 
    opacity:0.7; 
 
} 
 
.addonsContent .addonsQtyWrap { 
 
    width:100%; 
 
    padding: 0 15px; 
 
    margin-bottom:20px; 
 
} 
 
.addonsContent .addonsQtyWrap ul { 
 
    width:100%; 
 
    float:left; 
 
    padding: 0px; 
 
    margin: 0px 0px 10px 0px; 
 
} 
 
.addonsContent .addonsQtyWrap ul li { 
 
    list-style: none; 
 
    float: left; 
 
    font-size: 14px; 
 
    font-weight: bold; 
 
    border: 1px solid #ddd; 
 
    padding: 5px 20px; 
 
    margin-right: 10px; 
 
    margin-top: 10px; 
 
    border-radius: 4px; 
 
    cursor:pointer; 
 
} 
 
.addonsContent .addonsQtyWrap ul li:hover { 
 
    background:#eee; 
 
} 
 
.addonsContent .addonsQtyWrap ul li.active { 
 
    border:1px solid #d03e43; 
 
    color:#d03e43; 
 
} 
 
.addonsContent .popup_content_addonsWrap { 
 
    width:100%; 
 
    height:300px; 
 
    overflow:auto; 
 
} 
 
.addonsContent .addonsListWrap { 
 
    width:100%; 
 
} 
 
.addonsContent .addonsListWrap h3 { 
 
    font-size: 14px; 
 
    margin: 0px; 
 
    padding: 0px; 
 
    text-transform: uppercase; 
 
    margin-bottom: 10px; 
 
} 
 
.addonsContent .addonsListWrap ul { 
 
    list-style: none; 
 
    padding: 0px; 
 
    margin: 0px; 
 
} 
 
.addonsContent .addonsListWrap ul li { 
 
    list-style: none; 
 
    padding: 0px; 
 
    margin: 0px; 
 
    font-size: 14px; 
 
} 
 
.addonsContent .addonsListWrap ul li form { 
 
    padding: 0px; 
 
    margin: 0px; 
 
    height: auto; 
 
    display: -webkit-inline-box; 
 
} 
 
.addonsContent .addonsListWrap ul li .ui-mini { 
 
    margin: 0px; 
 
} 
 
.addonsContent .addonsListWrap ul li .ui-mini label { 
 
    background:#fff !important; 
 
    border:0px; 
 
    margin-left:-5px; 
 
    font-weight: normal; 
 
    font-size: 14px; 
 
} 
 
.myOrderPanel_footer { 
 
    width:100%; 
 
    height:auto; 
 
    bottom:0px; 
 
    left: 0px; 
 
    position:fixed; 
 
    background:rgba(208, 62, 67, 0.9); 
 
    border-top:2px solid #d03e43; 
 
    padding:10px; 
 
    color:#fff; 
 
    z-index:999; 
 
} 
 
.myOrderPanel_footer:hover { 
 
    background:rgba(208, 62, 67, 1); 
 
} 
 
.myOrderPanel_footer .myOrderPanel_inner { 
 
    width: 100%; 
 
    float: left; 
 
    position: relative; 
 
} 
 
.myOrderPanel_footer .myOrderPanel_inner:after { 
 
    content:'\e988'; 
 
    font-family:"fontello"; 
 
    display: inline-block; 
 
    top: 0px; 
 
    right: 0px; 
 
    font-size: 37px; 
 
    position:absolute; 
 
} 
 
.myOrderPanel_footer .myOrderPanel_inner .myorders, .myOrderPanel_footer .myOrderPanel_inner .subtotal { 
 
    float:left; 
 
} 
 
.myOrderPanel_footer .myOrderPanel_inner .myorders { 
 
    padding: 12px 0px; 
 
    font-size:18px; 
 
    margin-right:10px; 
 
} 
 
.myOrderPanel_footer .myOrderPanel_inner .myorders i { 
 
    font-weight: bold; 
 
    font-style: normal; 
 
    background: rgba(0, 0, 0, 0.4); 
 
    padding: 7px; 
 
    border-radius: 120px; 
 
    margin-left:5px; 
 
    margin-right:15px; 
 
} 
 
.myOrderPanel_footer .myOrderPanel_inner .subtotal { 
 
    line-height: 20px; 
 
    margin-top:4px; 
 
} 
 
.myOrderPanel_footer .myOrderPanel_inner .subtotal b { 
 
    font-size:16px; 
 
} 
 
.myOrderPanel_footer .myOrderPanel_inner .subtotal b span { 
 
    font-size:22px; 
 
} 
 
.myOrderPanel_footer .myOrderPanel_inner .subtotal .minOrder { 
 
    font-size:13px; 
 
    opacity:0.7; 
 
} 
 
/*.myOrderPanel_footer .myOrderPanel_right{ 
 
\t width:85%; 
 
\t float:left; 
 
\t padding-left: 12px; 
 
}*/ 
 

 
/*.myOrderPanel_footer .myOrderPanel_right .subtotal{ 
 
\t font-size:18px; 
 
} 
 
.myOrderPanel_footer .myOrderPanel_right .subtotal span{ 
 
\t margin-left:10px; 
 
\t font-size:24px; 
 
} 
 
.myOrderPanel_footer .myOrderPanel_right .subtotal i{ 
 
\t width:100%; 
 
\t float:left; 
 
\t font-size:13px; 
 
\t font-style:normal; 
 
}*/ 
 

 
/* My Order page start */ 
 
.MyOrdersPage { 
 
    width:100%; 
 
    float:left; 
 
    height:auto; 
 
} 
 
.MyOrdersPage .TreeMenu_Content .lastItm_Wrap { 
 
    border-bottom:1px solid #eee; 
 
    margin-bottom: 20px; 
 
    margin-top: 10px; 
 
    padding-bottom: 20px; 
 
} 
 
.vendorNameDtsl { 
 
    width:100%; 
 
    float:left; 
 
    height:auto; 
 
    background:rgba(0, 0, 0, 0.04); 
 
    padding:10px 20px; 
 
    border-bottom:1px solid #eee; 
 
} 
 
.vendorNameDtsl h6 { 
 
    font-size: 16px; 
 
    float: left; 
 
    margin:0px !important; 
 
    padding-top:4px !important; 
 
} 
 
.vendorNameDtsl span { 
 
    font-size: 14px; 
 
    float: right; 
 
    padding:2px 20px; 
 
    border:1px solid rgba(0, 0, 0, 0.1); 
 
    border-radius: 20px; 
 
} 
 
.orderSummary_priceDtsl { 
 
    width:100%; 
 
    float:left; 
 
    height:auto; 
 
    padding-bottom: 10px; 
 
} 
 
.orderSummary_priceDtsl li { 
 
    list-style:none; 
 
    text-align:right; 
 
    font-size:16px; 
 
    margin-bottom:10px; 
 
} 
 
.orderSummary_priceDtsl li span { 
 
    font-weight: bold; 
 
    margin-left: 10px; 
 
    width: 100px; 
 
    float: right; 
 
} 
 
.orderSummary_priceDtsl li.totalsection { 
 
    padding-top:17px; 
 
    border-top:2px solid #ddd; 
 
    font-size:20px; 
 
    color:#d03e43; 
 
    margin-top:20px; 
 
} 
 
/*.orderSummary_priceDtsl .inclusiveTax{ 
 
\t width:100%; 
 
\t text-align:center; 
 
\t margin:30px 0px !important; 
 
}*/ 
 
.customerNameDtl { 
 
    width:100%; 
 
    float:left; 
 
    height:auto; 
 
    padding:0 20px; 
 
    margin-bottom:20px; 
 
} 
 
.customerNameDtl_left { 
 
    font-size:16px; 
 
    line-height:26px; 
 
    width:auto; 
 
    text-align:left; 
 
    float:left; 
 
} 
 
.customerNameDtl_right { 
 
    float:right; 
 
    width:auto; 
 
    text-align:right; 
 
} 
 
.customerNameDtl_right .totalsection { 
 
    font-size:20px !important; 
 
    color:#d03e43; 
 
} 
 
.customerNameDtl_right .totalsection span { 
 
    font-weight: bold; 
 
    margin-left: 20px; 
 
} 
 
.customerNameDtl_right button { 
 
    padding:8px; 
 
    font-size:17px; 
 
} 
 
/* My Order page end */ 
 
.placeorderimg { 
 
    width:176px; 
 
    margin:0 auto; 
 
    padding-bottom:50px; 
 
} 
 
.cancelOrder { 
 
    width: 100% !important; 
 
    float: left; 
 
    padding: 18px 0px !important; 
 
    font-size: 16px; 
 
} 
 
.commentWrap { 
 
    width:100%; 
 
    float:left; 
 
    height:auto; 
 
    margin:15px 0px; 
 
} 
 
.commentWrap textarea { 
 
    width:100%; 
 
    float:left; 
 
    height:90px; 
 
    margin:15px 0px; 
 
    padding:15px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="testdiv"> 
 
<div>

Answer 2

主要問題：

html += '<label class="checkbox"><input type="checkbox" value=checkboxchecked /> Featured</label>' 

...是value=checkboxchecked將輸出value=checkboxchecked。 JavaScript引擎不會奇蹟般地知道value=是字面的，但checkboxchecked意味着來自變量。您可以使用字符串連接，使來自變量的值：

html += '<label class="checkbox"><input type="checkbox" value=' + checkboxchecked + ' /> Featured</label>' 
// -----------------------------------------------------------^^^^----------------^^^ 

表示結束初始字符串，然後追加從checkboxchecked值，然後繼續的字符串。

如果您使用ES2015以上，你可以使用文字而不是字符串文字被用置換的模板：

// ES2015 and above only 
html += `<label class="checkbox"><input type="checkbox" value=${checkboxchecked} /> Featured</label>`; 

注意模板文字使用反引號，而不是報價，幷包含用${開始並以}結束。

---

另外：複選框的值不同於此類，與選中或不選中不同。

如果你的意思是讓選中或取消選中，你這樣做，無論是通過包括checked屬性或離開它：

html += '<label class="checkbox"><input type="checkbox" ' + (pac_newflag === 'yes' ? 'checked' : '') + ' /> Featured</label>' 

將使用此HTML如果複選框未被選中：

<label class="checkbox"><input type="checkbox" /> Featured</label> 

，這如果是：

<label class="checkbox"><input type="checkbox" checked /> Featured</label> 

Answer 3

只需添加增值空間之間= 「複選框」，並檢查

html += '<label class="checkbox"><input type="checkbox" value="checkbox" checked /> Featured</label>'; 

觀看演示

http://jsfiddle.net/mannanbahelim/fadtsk0v/

Answer 4

您已經使用了檢查不正確的屬性複選框，a LSO用不着的if..else您可以通過三元操作

var jsonresponse = { 
 
     "packs": [ 
 
     { 
 
       "pac_newflag": "no" 
 
     }, 
 
     { 
 
       "pac_newflag": "yes" 
 
     }] 
 
} 
 

 

 
var html = ''; 
 
$(document).ready(function() 
 
{ 
 
     for (var i = 0; i < jsonresponse.packs.length; i++) 
 
     { 
 
       var pac_newflag = jsonresponse.packs[i].pac_newflag; 
 
       var checkboxchecked = 'false' 
 
       html += '<label class="checkbox"><input type="checkbox" value="" '+(pac_newflag === 'yes'?"checked":"")+' /> Featured</label>'; 
 
     } 
 
     $("#testdiv").html(html); 
 
});

.pageMidLogo { 
 
    width:100%; 
 
    float:left; 
 
    text-align:center; 
 
} 
 
.createAccountWrap { 
 
    width:100%; 
 
    float:left; 
 
    height:auto; 
 
    padding:20px; 
 
} 
 
.createAccountWrap .h3_head { 
 
    float: left; 
 
    text-align: center; 
 
    width: 100%; 
 
    margin-bottom: 25px !important; 
 
} 
 
.iLabel { 
 
    font-size: 13px; 
 
    line-height: 16px; 
 
    width: 100%; 
 
    float: left; 
 
} 
 
.insideInput { 
 
    width:100%; 
 
    float:left; 
 
    position:relative; 
 
} 
 
.tooltipIcon { 
 
    width: 27px; 
 
    height: 27px; 
 
    position: absolute; 
 
    right: 8px; 
 
    top: 16px; 
 
    background: #ababab; 
 
    -webkit-border-radius: 25px; 
 
    border-radius: 25px; 
 
} 
 
.tooltipIcon:before { 
 
    font-size: 19px; 
 
    margin-top: 4px; 
 
    color:#fff; 
 
} 
 
.pop_tooltipIcon { 
 
    font-size: 36px; 
 
    text-align: center; 
 
    width: 100%; 
 
    float: left; 
 
    margin-bottom: 10px; 
 
    color:#d03e43; 
 
} 
 
.iconPinReload { 
 
    /*background: url(../images/icon-capthareload.png) 10px 10px no-repeat #f6f6f6; 
 
\t border-left: 1px solid #ddd; 
 
\t width: 52px; 
 
\t height: 41px;*/ 
 
    position: absolute; 
 
    top: -20px; 
 
    right: 0px; 
 
    cursor: pointer; 
 
    font-size: 15px; 
 
} 
 
/*.iconPinReload:hover{ 
 
\t background: url(../images/icon-capthareload.png) 10px 10px no-repeat #f0f0f0; 
 
}*/ 
 
.tpMenuWrap { 
 
    position:absolute; 
 
    top:0px; 
 
    width: 88%; 
 
} 
 
.btMenuWrap { 
 
    position:absolute; 
 
    bottom:0px; 
 
    width: 88%; 
 
} 
 
.ul_menu { 
 
    padding:0px; 
 
    margin:0px; 
 
    width:100%; 
 
    list-style:none; 
 
} 
 
.ul_menu li { 
 
    padding: 10px 0px; 
 
    margin: 0px; 
 
    width: 100%; 
 
    list-style: none; 
 
    font-size: 24px; 
 
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); 
 
} 
 
.ul_menu li a { 
 
    font-weight: 500; 
 
    color:#ddd; 
 
} 
 
.ul_menu li a:hover { 
 
    color:#fff; 
 
} 
 
.panelCloseBtn { 
 
    float: right; 
 
    margin-bottom: 15px; 
 
    width: 100%; 
 
    text-align: right; 
 
    margin-top: 15px; 
 
    font-size: 20px; 
 
    color: #777 !important; 
 
} 
 
.panelCloseBtn:hover { 
 
    color: #999 !important; 
 
} 
 
.homeListMenuWrap { 
 
    padding:0px !important; 
 
    margin:0px; 
 
    width:100%; 
 
    list-style:none; 
 
} 
 
.homeListMenuWrap li { 
 
    padding:25px 25px 20px 25px; 
 
    margin:0px; 
 
    width:100%; 
 
    list-style:none; 
 
    border-bottom:1px solid #ddd; 
 
} 
 
.homeListMenuWrap li a:hover { 
 
    color:#d03e43; 
 
} 
 
.homeListMenuWrap li .qrcode { 
 
    background:url(../images/icon-QRcode.png) left top no-repeat; 
 
    padding-left: 120px; 
 
    display: block; 
 
    color:#314158; 
 
    min-height:110px; 
 
} 
 
.homeListMenuWrap li .homedeliver { 
 
    background:url(../images/icon-homedelivery.png) left top no-repeat; 
 
    padding-left: 120px; 
 
    display: block; 
 
    color:#314158; 
 
    min-height:110px; 
 
} 
 
.homeListMenuWrap li .qrcode p, .homeListMenuWrap li .homedeliver p { 
 
    font-size:15px; 
 
} 
 
.qrcode_errorWrap { 
 
    width:100%; 
 
    float:left; 
 
    height:auto; 
 
    padding:20px; 
 
} 
 
.qrcode_errorWrap .qrcodeError { 
 
    float: left; 
 
    text-align: center; 
 
    width: 100%; 
 
    font-size:26px !important; 
 
    margin-bottom: 25px !important; 
 
    font-weight: 400 !important; 
 
} 
 
.orDivider { 
 
    width: 100%; 
 
    float: left; 
 
    text-align: center; 
 
    font-size: 22px !important; 
 
    font-style: italic; 
 
    position:relative; 
 
    margin: 25px 0; 
 
} 
 
.orDivider span { 
 
    background: #fff; 
 
    position: relative; 
 
    z-index: 1; 
 
    padding: 0 15px; 
 
} 
 
.orDivider .hr { 
 
    position: absolute; 
 
    top: 5px; 
 
    width: 100%; 
 
    background: #eee; 
 
    border: 1px solid #eee; 
 
} 
 
/* Tree Menu Start */ 
 
.TreeMenu { 
 
    width:100%; 
 
} 
 
.TreeMenu .ui-collapsible-heading { 
 
    margin:0px !important; 
 
} 
 
.TreeMenu .ui-collapsible-heading a { 
 
    border-left:0px; 
 
    border-right:0px; 
 
    border-bottom:1px solid #e6e6e6; 
 
    border-top:1px solid #e6e6e6; 
 
    border-radius: 0px; 
 
} 
 
.TreeMenu .ui-collapsible-heading-toggle { 
 
    font-size:20px; 
 
} 
 
.TreeMenu .ui-collapsible-content { 
 
    margin: 0; 
 
    padding: 0px 20px; 
 
    border: 0px !important; 
 
    background: #fff; 
 
} 
 
.TreeMenu_Content { 
 
    width:100%; 
 
    height:auto; 
 
    padding: 15px 0px 0px 0px; 
 
    display: inline-block; 
 
} 
 
.TreeMenu_Content .lastItm_Wrap { 
 
    width:100%; 
 
    float:left; 
 
    height:auto; 
 
    margin-bottom:5px; 
 
} 
 
.TreeMenu_Content .lastItm_Wrap .Itm_left_aside { 
 
    width:60%; 
 
    float:left; 
 
} 
 
.TreeMenu_Content .lastItm_Wrap .Itm_dtsl { 
 
    width:75%; 
 
    float:left; 
 
} 
 
.TreeMenu_Content .lastItm_Wrap .Itm_dtsl .vegLabel { 
 
    background:url(../images/veg_labels.png) left 3px no-repeat; 
 
    padding-left: 25px; 
 
} 
 
.TreeMenu_Content .lastItm_Wrap .Itm_dtsl .nonvegLabel { 
 
    background:url(../images/nonveg_labels.png) left 3px no-repeat; 
 
    padding-left: 25px; 
 
} 
 
.TreeMenu_Content .lastItm_Wrap .Itm_dtsl h3 { 
 
    font-size:16px; 
 
    white-space: nowrap; 
 
    width: 100%; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    position:relative; 
 
    padding-right: 50px; 
 
} 
 
.TreeMenu_Content .lastItm_Wrap .Itm_dtsl h3 .prdDiscription { 
 
    position: absolute; 
 
    right: 0px; 
 
    top: 1px; 
 
    width: auto !important; 
 
    border-radius: 20px; 
 
    padding: 0px 8px; 
 
    font-size: 14px; 
 
    margin: 0px; 
 
} 
 
.TreeMenu_Content .lastItm_Wrap .Itm_dtsl .addonsList { 
 
    font-size: 14px; 
 
    opacity: 0.7; 
 
    width: 100%; 
 
    float: left; 
 
} 
 
.TreeMenu_Content .lastItm_Wrap .Itm_img { 
 
    width:74px; 
 
    height:74px; 
 
    float:left; 
 
    background:#ddd; 
 
    margin-right:10px; 
 
    overflow:hidden; 
 
} 
 
.TreeMenu_Content .lastItm_Wrap .Itm_img img { 
 
    width:100%; 
 
    float:left; 
 
    height:100%; 
 
    border:0px; 
 
} 
 
.TreeMenu_Content .lastItm_Wrap .Itm_right_aside { 
 
    width:30%; 
 
    float:right; 
 
    text-align:right; 
 
} 
 
.TreeMenu_Content .lastItm_Wrap .Itm_right_aside .trashBtn { 
 
    font-size:20px; 
 
} 
 
.TreeMenu_Content .lastItm_Wrap .Itm_right_aside p { 
 
    font-size:16px; 
 
} 
 
.TreeMenu_Content .lastItm_Wrap .Itm_right_aside p strike { 
 
    margin-right:10px; 
 
} 
 
.TreeMenu_Content .lastItm_Wrap .Itm_right_aside p b { 
 
    font-weight:600; 
 
} 
 
/* Tree Child */ 
 
.TreeMenuChild .ui-collapsible-content { 
 
    padding:0px; 
 
} 
 
.TreeMenuChild .ui-icon-plus:after { 
 
    background-image: url(images/icons-png/carat-r-black.png) !important; 
 
} 
 
.TreeMenuChild .ui-icon-minus:after { 
 
    background-image: url(images/icons-png/carat-d-white.png) !important; 
 
    background-color:#d03e43; 
 
} 
 
.TreeMenuChild .ui-collapsible-heading-toggle { 
 
    background-color:#fff !important; 
 
    font-size:18px; 
 
} 
 
.TreeMenuChild .ui-collapsible-heading-toggle:last-child { 
 
    margin-top:-1px; 
 
} 
 
.addonsBtn { 
 
    width: auto !important; 
 
    float: left; 
 
    padding: 5px 20px; 
 
    border-radius: 20px !important; 
 
    font-size:13px; 
 
} 
 
.addonsBtn a { 
 
    color:#333 !important; 
 
} 
 
.Itm_discrp { 
 
    width:100%; 
 
    float:left; 
 
    height:auto; 
 
    margin-top:10px; 
 
} 
 
.Itm_discrp h3 { 
 
    margin-bottom: 10px !important; 
 
    padding: 0px; 
 
} 
 
.Itm_discrp p { 
 
    text-align: justify; 
 
} 
 
.Qty_Wrap { 
 
    width:100%; 
 
    float:left; 
 
} 
 
.Qty_Wrap .QtyBtn { 
 
    float: left; 
 
    width: 33px; 
 
    border-radius: 34px; 
 
    padding: 5px; 
 
    font-size: 14px; 
 
} 
 
.Qty_Wrap .QtyBtn:before { 
 
    margin-top:4px; 
 
} 
 
.Qty_Wrap .ui-input-text { 
 
    float: left; 
 
    border: 0px; 
 
    box-shadow: none; 
 
    background: #fff; 
 
    width: 50px; 
 
    font-size: 24px; 
 
    padding: 0px; 
 
    margin: 0px 2px 0px 0px; 
 
    text-align: center; 
 
} 
 
.Qty_Wrap .QtyInput { 
 
    float: left; 
 
    width: 100%; 
 
    padding: 0px; 
 
    margin: 0px; 
 
    text-align: center; 
 
    min-height: 1.6em; 
 
} 
 
.addonsContent h2 { 
 
    font-size:18px; 
 
} 
 
.addonsContent .rightAction { 
 
    float: right; 
 
    font-size: 13px; 
 
    margin-top: -28px; 
 
} 
 
.addonsContent .rightAction a { 
 
    padding-right:20px; 
 
} 
 
.addonsContent .rightAction a.tick { 
 
    font-size: 22px; 
 
    padding-right:0px; 
 
} 
 
.addonsContent .rightAction a.remove { 
 
    color:#333; 
 
    opacity:0.7; 
 
} 
 
.addonsContent .addonsQtyWrap { 
 
    width:100%; 
 
    padding: 0 15px; 
 
    margin-bottom:20px; 
 
} 
 
.addonsContent .addonsQtyWrap ul { 
 
    width:100%; 
 
    float:left; 
 
    padding: 0px; 
 
    margin: 0px 0px 10px 0px; 
 
} 
 
.addonsContent .addonsQtyWrap ul li { 
 
    list-style: none; 
 
    float: left; 
 
    font-size: 14px; 
 
    font-weight: bold; 
 
    border: 1px solid #ddd; 
 
    padding: 5px 20px; 
 
    margin-right: 10px; 
 
    margin-top: 10px; 
 
    border-radius: 4px; 
 
    cursor:pointer; 
 
} 
 
.addonsContent .addonsQtyWrap ul li:hover { 
 
    background:#eee; 
 
} 
 
.addonsContent .addonsQtyWrap ul li.active { 
 
    border:1px solid #d03e43; 
 
    color:#d03e43; 
 
} 
 
.addonsContent .popup_content_addonsWrap { 
 
    width:100%; 
 
    height:300px; 
 
    overflow:auto; 
 
} 
 
.addonsContent .addonsListWrap { 
 
    width:100%; 
 
} 
 
.addonsContent .addonsListWrap h3 { 
 
    font-size: 14px; 
 
    margin: 0px; 
 
    padding: 0px; 
 
    text-transform: uppercase; 
 
    margin-bottom: 10px; 
 
} 
 
.addonsContent .addonsListWrap ul { 
 
    list-style: none; 
 
    padding: 0px; 
 
    margin: 0px; 
 
} 
 
.addonsContent .addonsListWrap ul li { 
 
    list-style: none; 
 
    padding: 0px; 
 
    margin: 0px; 
 
    font-size: 14px; 
 
} 
 
.addonsContent .addonsListWrap ul li form { 
 
    padding: 0px; 
 
    margin: 0px; 
 
    height: auto; 
 
    display: -webkit-inline-box; 
 
} 
 
.addonsContent .addonsListWrap ul li .ui-mini { 
 
    margin: 0px; 
 
} 
 
.addonsContent .addonsListWrap ul li .ui-mini label { 
 
    background:#fff !important; 
 
    border:0px; 
 
    margin-left:-5px; 
 
    font-weight: normal; 
 
    font-size: 14px; 
 
} 
 
.myOrderPanel_footer { 
 
    width:100%; 
 
    height:auto; 
 
    bottom:0px; 
 
    left: 0px; 
 
    position:fixed; 
 
    background:rgba(208, 62, 67, 0.9); 
 
    border-top:2px solid #d03e43; 
 
    padding:10px; 
 
    color:#fff; 
 
    z-index:999; 
 
} 
 
.myOrderPanel_footer:hover { 
 
    background:rgba(208, 62, 67, 1); 
 
} 
 
.myOrderPanel_footer .myOrderPanel_inner { 
 
    width: 100%; 
 
    float: left; 
 
    position: relative; 
 
} 
 
.myOrderPanel_footer .myOrderPanel_inner:after { 
 
    content:'\e988'; 
 
    font-family:"fontello"; 
 
    display: inline-block; 
 
    top: 0px; 
 
    right: 0px; 
 
    font-size: 37px; 
 
    position:absolute; 
 
} 
 
.myOrderPanel_footer .myOrderPanel_inner .myorders, .myOrderPanel_footer .myOrderPanel_inner .subtotal { 
 
    float:left; 
 
} 
 
.myOrderPanel_footer .myOrderPanel_inner .myorders { 
 
    padding: 12px 0px; 
 
    font-size:18px; 
 
    margin-right:10px; 
 
} 
 
.myOrderPanel_footer .myOrderPanel_inner .myorders i { 
 
    font-weight: bold; 
 
    font-style: normal; 
 
    background: rgba(0, 0, 0, 0.4); 
 
    padding: 7px; 
 
    border-radius: 120px; 
 
    margin-left:5px; 
 
    margin-right:15px; 
 
} 
 
.myOrderPanel_footer .myOrderPanel_inner .subtotal { 
 
    line-height: 20px; 
 
    margin-top:4px; 
 
} 
 
.myOrderPanel_footer .myOrderPanel_inner .subtotal b { 
 
    font-size:16px; 
 
} 
 
.myOrderPanel_footer .myOrderPanel_inner .subtotal b span { 
 
    font-size:22px; 
 
} 
 
.myOrderPanel_footer .myOrderPanel_inner .subtotal .minOrder { 
 
    font-size:13px; 
 
    opacity:0.7; 
 
} 
 
/*.myOrderPanel_footer .myOrderPanel_right{ 
 
\t width:85%; 
 
\t float:left; 
 
\t padding-left: 12px; 
 
}*/ 
 

 
/*.myOrderPanel_footer .myOrderPanel_right .subtotal{ 
 
\t font-size:18px; 
 
} 
 
.myOrderPanel_footer .myOrderPanel_right .subtotal span{ 
 
\t margin-left:10px; 
 
\t font-size:24px; 
 
} 
 
.myOrderPanel_footer .myOrderPanel_right .subtotal i{ 
 
\t width:100%; 
 
\t float:left; 
 
\t font-size:13px; 
 
\t font-style:normal; 
 
}*/ 
 

 
/* My Order page start */ 
 
.MyOrdersPage { 
 
    width:100%; 
 
    float:left; 
 
    height:auto; 
 
} 
 
.MyOrdersPage .TreeMenu_Content .lastItm_Wrap { 
 
    border-bottom:1px solid #eee; 
 
    margin-bottom: 20px; 
 
    margin-top: 10px; 
 
    padding-bottom: 20px; 
 
} 
 
.vendorNameDtsl { 
 
    width:100%; 
 
    float:left; 
 
    height:auto; 
 
    background:rgba(0, 0, 0, 0.04); 
 
    padding:10px 20px; 
 
    border-bottom:1px solid #eee; 
 
} 
 
.vendorNameDtsl h6 { 
 
    font-size: 16px; 
 
    float: left; 
 
    margin:0px !important; 
 
    padding-top:4px !important; 
 
} 
 
.vendorNameDtsl span { 
 
    font-size: 14px; 
 
    float: right; 
 
    padding:2px 20px; 
 
    border:1px solid rgba(0, 0, 0, 0.1); 
 
    border-radius: 20px; 
 
} 
 
.orderSummary_priceDtsl { 
 
    width:100%; 
 
    float:left; 
 
    height:auto; 
 
    padding-bottom: 10px; 
 
} 
 
.orderSummary_priceDtsl li { 
 
    list-style:none; 
 
    text-align:right; 
 
    font-size:16px; 
 
    margin-bottom:10px; 
 
} 
 
.orderSummary_priceDtsl li span { 
 
    font-weight: bold; 
 
    margin-left: 10px; 
 
    width: 100px; 
 
    float: right; 
 
} 
 
.orderSummary_priceDtsl li.totalsection { 
 
    padding-top:17px; 
 
    border-top:2px solid #ddd; 
 
    font-size:20px; 
 
    color:#d03e43; 
 
    margin-top:20px; 
 
} 
 
/*.orderSummary_priceDtsl .inclusiveTax{ 
 
\t width:100%; 
 
\t text-align:center; 
 
\t margin:30px 0px !important; 
 
}*/ 
 
.customerNameDtl { 
 
    width:100%; 
 
    float:left; 
 
    height:auto; 
 
    padding:0 20px; 
 
    margin-bottom:20px; 
 
} 
 
.customerNameDtl_left { 
 
    font-size:16px; 
 
    line-height:26px; 
 
    width:auto; 
 
    text-align:left; 
 
    float:left; 
 
} 
 
.customerNameDtl_right { 
 
    float:right; 
 
    width:auto; 
 
    text-align:right; 
 
} 
 
.customerNameDtl_right .totalsection { 
 
    font-size:20px !important; 
 
    color:#d03e43; 
 
} 
 
.customerNameDtl_right .totalsection span { 
 
    font-weight: bold; 
 
    margin-left: 20px; 
 
} 
 
.customerNameDtl_right button { 
 
    padding:8px; 
 
    font-size:17px; 
 
} 
 
/* My Order page end */ 
 
.placeorderimg { 
 
    width:176px; 
 
    margin:0 auto; 
 
    padding-bottom:50px; 
 
} 
 
.cancelOrder { 
 
    width: 100% !important; 
 
    float: left; 
 
    padding: 18px 0px !important; 
 
    font-size: 16px; 
 
} 
 
.commentWrap { 
 
    width:100%; 
 
    float:left; 
 
    height:auto; 
 
    margin:15px 0px; 
 
} 
 
.commentWrap textarea { 
 
    width:100%; 
 
    float:left; 
 
    height:90px; 
 
    margin:15px 0px; 
 
    padding:15px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div id="testdiv"> 
 
<div>

Answer 5

在這裏它是如何工作實現它;

var jsonresponse = { 
     "packs": [ 
     { 
       "pac_newflag": "no" 
     }, 
     { 
       "pac_newflag": "yes" 
     }] 
} 


var html = ''; 
$(document).ready(function() 
{ 
     for (var i = 0; i < jsonresponse.packs.length; i++) 
     { 
       var pac_newflag = jsonresponse.packs[i].pac_newflag; 

       if (pac_newflag === 'yes') 
       {  
         $("#testdiv").append('<label class="checkbox"><input type="checkbox" checked /> Featured</label>'); 
       } 
       else 
       {     
         $("#testdiv").append('<label class="checkbox"><input type="checkbox" /> Featured</label>'); 
       } 

     } 

}); 

Answer 6

剛剛被錯誤使用的複選框的選中屬性。 我編輯了你的小提琴; 工作正常，

Here the fiddle 


    http://jsfiddle.net/cod7ceho/122/