jquery - appending the input attribute value differs from text value -

on looping getting value json, , place in input checkbox both values , text, getting wrong outupt, difference text value attribute values

my loop:

$.map(data["alllocales"], function(value, i){     if(i % 5 === 0 ){         col0 += "<label><input value="+ value.name +" type='checkbox' />"+value.name+"</label>"     } else if(i % 5 === 1) {         col1 += "<label><input value="+ value.name +" type='checkbox' />"+value.name+"</label>"     } else if(i % 5 === 2) {         col2 += "<label><input value="+ value.name +" type='checkbox' />"+value.name+"</label>"     } else if(i % 5 === 3) {         col3 += "<label><input value="+ value.name +" type='checkbox' />"+value.name+"</label>"     } else if(i % 5 === 4) {         col4 += "<label><input value="+ value.name +" type='checkbox' />"+value.name+"</label>"     } }) 

example of wrong htmls:

<label class="blue"><input value="italian" type="checkbox">italian</label> <label class="blue"><input value="italian" (italy)="" type="checkbox">italian (italy)</label> <label class="blue"><input value="italian" (switzerland)="" type="checkbox">italian (switzerland)</label> 

what wrong here..? looking both attribute , text value should same

you appear not quoting results properly, important when dealing spaces. example,

    "<label><input value="+ value.name +" type='checkbox' />"+value.name+"</label>" 

when fed italian (italy) being rendered as:

    <label><input value=italian (italy) type='checkbox' />italian (italy)</label> 

(italy) being treated blank attribute, per html5 specification, , given value of "".

to fix this, add quote marks around output value:

    "<label><input value='"+ value.name +"' type='checkbox' />"+value.name+"</label>" 

should render:

    <label><input value='italian (italy)' type='checkbox' />italian (italy)</label> 

you may want consider escaping ' characters may occur in value being output, there's no evidence part of current dataset.