Checkbox control - storing attr into array

I think you should loop over all checkboxes everytime to maintain an good list of checked checkboxes :

    <script>
        jQuery(function() {

            function actProp() {

                var isChecked = $(this).is(":checked");
                var propChk = "#" + $(this).attr('name');
                var chkCon = "#" + $(this).attr('class');
                var chkState = $(this).attr('id');

                var chkStateCollection = [];
                $(":checkbox").each(function() {
                   if( $(this).is(":checked") ) {
                       chkStateCollection.push(chkState);
                   }
                });
                console.log(chkStateCollection);

                if(isChecked) {
                    $(propChk).fadeIn(1000);
                    $(chkCon).fadeIn(1000);
                    //addChkState();
                    return false;
                }
                else {
                    event.stopPropagation();
                    $(propChk).fadeOut(1000);
                    $(chkCon).fadeOut(1000);
                }
            }

           $(":checkbox").change(actProp);
        });
    </script>

Select allOpen in new window

Couple of things you'll need to look at.

Firstly, you'll need to pass in the checkbox to your function. this won't work. You haven't shown how you're calling the actProp() function, but something like this:

<input type="checkbox" onclick="actProp(this)">

And then declare your function like so:

function actProp(checkbox) {
    var isChecked = $(checkbox).is(":checked");
    ...

Select allOpen in new window

For the array, you're declaring it inside your function, so it's only available inside that function, and it will be recreated every time it's called. Declare it outside of the function.

You seem to be concatenating the name to a # symbol to get an ID. Can't see why you'd do that when all you need is the ID. If you're doing it to refer to other elements, then I would suggest you use data atributes instead.

var chkStateCollection = [];

function actProp(checkbox) {
    var isChecked = $(checkbox).is(":checked");
    var chkState = $(checkbox).attr('id');

    var chkCon = $(checkbox).data('someDataProp'); 
    var propChk = "#" + $(checkbox).data('anotherDataProp');

    chkStateCollection.push(chkState);
    ...
    if (isChecked) {   
        ...
    } else {  
        ...       
    }
}

Select allOpen in new window

<input type="checkbox" id="someId" data-someDataProp="#xxx" data-anotherDataProp="#yyy" onclick="actProp(this)">

Select allOpen in new window

Hey leak

i implemented your tip and it sounds very clear but the result wasnt the exptect outcome.

below is the out come

["POSTITION"]
contact.php?cid=10296&id=:3330 (2) ["FIRST_NAME", "FIRST_NAME"]

Select allOpen in new window

it should be more like ['POSITION', 'FIRST_NAME']

hey Chris Stanyon

Sorry here is how it is declared -

var propCheck = $('#default-checked-list').find('input').each(function(){});
    

    
      
    propCheck.on('change', actProp);

Select allOpen in new window

within that container is a number of checkboxes.

if you are referring to

   var propChk = "#" + $(this).attr('name');
     var chkCon = "#" + $(this).attr('class');

Select allOpen in new window

this is used the another output by this function.

but i shall give ur tip a go.

Chris Stanyon declaring the array outside the function seemed to have done the trick.

Hey Chris Stanyon

the reason for that is those two will handle another event down the line which needs the values from class and name.

No worries Alex. Glad you got it working.

FYI - you can simplify the event binding:

$('#default-checked-list').find('input').change(actProp);