UnKnown UnKnown - 2 months ago 9
jQuery Question

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

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

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>

Comments