Unable to set checkbox property true and false based on ajax response

Question

Based on the ajax response i am trying to check or uncheck checkbox , i have tried this way

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);
});

and this is my fiddle

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

Could you please let me know how to do this

Answer 1

Just misused checked attribute for checkbox. I've edited your fiddle; Works fine,

Here the fiddle


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

Answer 2

here how it works;

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 3

You have used incorrect attribute for check checkbox, also no need of if..else you can achieve it by ternary operator

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;
	border-left: 1px solid #ddd;
	width: 52px;
	height: 41px;*/
    position: absolute;
    top: -20px;
    right: 0px;
    cursor: pointer;
    font-size: 15px;
}
/*.iconPinReload:hover{
	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{
	width:85%;
	float:left;
	padding-left: 12px;
}*/

/*.myOrderPanel_footer .myOrderPanel_right .subtotal{
	font-size:18px;
}
.myOrderPanel_footer .myOrderPanel_right .subtotal span{
	margin-left:10px;
	font-size:24px;
}
.myOrderPanel_footer .myOrderPanel_right .subtotal i{
	width:100%;
	float:left;
	font-size:13px;
	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{
	width:100%;
	text-align:center;
	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 4

just add space between the value="checkbox" and checked

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

View Demo

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

Answer 5

To make checkbox checked you are passing true value in value that's totally wrong.

You should have to take create attribute in javascript variable and should have to append in the HTML.

Please check below snippet for more details.

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;
	border-left: 1px solid #ddd;
	width: 52px;
	height: 41px;*/
    position: absolute;
    top: -20px;
    right: 0px;
    cursor: pointer;
    font-size: 15px;
}
/*.iconPinReload:hover{
	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{
	width:85%;
	float:left;
	padding-left: 12px;
}*/

/*.myOrderPanel_footer .myOrderPanel_right .subtotal{
	font-size:18px;
}
.myOrderPanel_footer .myOrderPanel_right .subtotal span{
	margin-left:10px;
	font-size:24px;
}
.myOrderPanel_footer .myOrderPanel_right .subtotal i{
	width:100%;
	float:left;
	font-size:13px;
	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{
	width:100%;
	text-align:center;
	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 6

The primary problem with this line:

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

...is that value=checkboxchecked will output value=checkboxchecked. The JavaScript engine isn't going to magically know that value= is literal but checkboxchecked is meant to come from a variable. You can use string concatenation to make the value come from the variable:

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

That ends the initial string, then appends the value from checkboxchecked, then continues the string.

If you were using ES2015 and above, you could use a template literal instead of a string literal with a substitution:

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

Note that template literals use backticks rather than quotes, and a substitution starts with ${ and ends with }.

---

Separately: It's unusual for a checkbox's value to vary like that, as opposed to being either checked or unchecked.

If you meant to make it checked or unchecked, you do that by either including a checked attribute or leaving it out:

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

That will use this HTML if the checkbox isn't checked:

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

and this if it is:

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