When I manually check/uncheck checkboxes,
$('input[type=checkbox]').change(function(){}) fires perfectly.
But when I set the checked property inside code, this event handler is not get executed.
Markup:
<li><input id="p-Client-Management" type="checkbox" name="selectedMenuItem" value="Client Management">Client Management</input>
<ul>
<li><input class="parent-p-Client-Management" type="checkbox" name="selectedMenuItem" value="Demo Client">Demo Client</input></li>
<li><input class="parent-p-Client-Management" type="checkbox" name="selectedMenuItem" value="Basic Clients">Basic Clients</input></li>
</ul>
</li>
**Event handler :**
$('input[type=checkbox]').change(function(){
var id = $(this).attr('id');
if(id){
console.log("parent found -> "+id);
var children = $('.parent-'+id);
console.log("children of "+id+" -> "+children.length);
for(var i = 0; i<children.length; i++){
children[i].checked = document.getElementById(id).checked;
}
}
else{
if(this.checked){
console.log("Child is checked");
var suffix = $(this).attr('class').split("-")[2];
document.getElementById('p-'+suffix).checked = true;
}
});
I have id for the parent checkbox and class for child checkboxes. When parent checkbox is checked, the if block will get executed showingconsole output parent found. When child is checked, the else block will get executed showing console output Child is checked. What I want is, on checking parent manually, the child's else block will also get executed as their checked property is set with the parent and providing output Child is checked
Aucun commentaire:
Enregistrer un commentaire