Javascript: How to make this function working for click effects

I am designing a page where it displays the staff details in following structure :

Javascript: How to make this function working for click effects

user can click anywhere in the details box and the checkbox will get selected along with the change in the className of the details <div> box.

The problem i m facing is when i click anywhere in the details box it works fine.. but when i click on checkbox it only changes the className but doesnt make any changes to checkbox.

Also there is one condition, few users are allowed to selected limited staff at a time and few are allowed to select all of them..

I have assigned a myClick() function to the outer <div> box (one with red border) and the function is :

var selectedCount = 0; myClick = function(myObj,event) { var trgt =(event.srcElement) ? event.srcElement :; tgName = trgt.tagName; //following statement gives me correct details element event though i clicked on any child tags theElem = (tgName == 'DIV') ? trgt : ( (tgName == 'B') ? trgt.parentNode.parentNode : trgt.parentNode); if(allowed_selection == 'unlimited') { if(theElem.className == 'details_clicked') { theElem.className = 'details'; theElem.getElementsByTagName('input')[0].checked = false; } else if(theElem.className == 'details_hover') { theElem.className = 'details_clicked'; if(tgName != 'INPUT') theElem.getElementsByTagName('input')[0].checked = true; } } else { if(theElem.className == 'details_clicked') { theElem.className = 'details'; theElem.getElementsByTagName('input')[0].checked = false; selectedCount--; } else if(theElem.className == 'details_hover') { if(selectedCount == allowed_selection ) return false; theElem.className = 'details_clicked'; //i think, this is the suspicious area for errors theElem.getElementsByTagName('input')[0].checked = true; selectedCount++; } } return false; };

-------------Problems Reply------------

The problem is these return lines in your function:

return false;

When you connect an event to a form element that performs an action, such as a checkbox or button, returning false will prevent that default action. It stops the event from taking place as it regularly would.

You could try something like this at the top of your function:

var returnValue = (tgName == 'INPUT' && trgt.type == "checkbox") ? true : false;

And then when calling 'return ', use:

return returnValue;

If you return true you allow the checkbox to act as normal and check / uncheck itself.

Category:javascript Views:3 Time:2011-02-21

Related post

Copyright (C), All Rights Reserved.

processed in 0.095 (s). 11 q(s)