CODEWITHSUNDEEP
javascriptjqueryhtmlcheckbox
dar0x
dar0x

Reputation: 361

Add a checkbox with jquery into a div

I want to add a checkbox into a div into another div (with id="#sensorList"), and then bind some event handlers to it. I do in this way

/* Add div */
$("#sensorList").append($('<div>', { id : sensorId})
.addClass("sensorListItem")
.text(sensorId)
);

/* Adds visibile checkbox */
$("#"+sensorId).append($('<input>', { id : sensorId + "VisibleCheckbox", type:"checkbox", name: sensorId + "VisibleCheckbox"}));

It seems to work fine, but if I click on checkbox, it doesn't switch to checked status!

Any idea? Thank you in advance.

I'm so sorry, I figured out where the problem was. I was unable to see the checkbox checked because I had a click handler on div called sensorId, and I stupidly did: event.preventDefault() (there is no default behaviour clicking on a div!!!)

Upvotes: 4

Views: 19774

Answers (2)

Phu
Phu

Reputation: 572

It works for me. Check out the jsfiddle: http://jsfiddle.net/pVjNM/

var sensorId = "one";

/* Add div */
$("#sensorList").append($('<div>', { id : sensorId })
.addClass("sensorListItem")
.text(sensorId)
);

/* Adds visibile checkbox */
$("#"+sensorId).append($('<input>', { id : sensorId + "VisibleCheckbox", type:"checkbox", name: sensorId + "VisibleCheckbox"}));

$("input[type=checkbox]").each(function(){
    this.click();
    console.log("Should be true:", this.checked);
});


$("input[type=checkbox]").each(function(){
    this.click();
    console.log("Should be false:", this.checked);
});​

Upvotes: 2

kingkode
kingkode

Reputation: 2220

try some long hand and see if it works...

$("#"+sensorId).append('<input type="checkbox" id="' + sensorId + 'VisibleCheckbox" name="'  + sensorId + 'VisibleCheckbox" >');

Upvotes: 3

Related Questions