Forum

HomeHomeCoreCoreGeneralGeneral'small' jQuery problem
Previous
 
Next
New Post
7/29/2011 6:59 AM
 

I've pretty much asked this in a few jQuery forums but had no response so hopefully someone here might know what I'm doing wrong.

I have a list of checkboxes, in multiple rows with each along the lines of:

    <tr>
        <td style="text-align: center;">
            <input id="frmEmployee" name="frmEmployee" value="'[PayrollRef,Employees]'" type="checkbox" checked="checked" />
        </td>
        <td>[FirstName,Employees] [LastName,Employees]</td>
        <td style="text-align: center;">
            <input id="frmUseTimesheets[PayrollRef,Employees]" name="frmUseTimesheets[PayrollRef,Employees]" value="True" type="checkbox" checked="checked" />
        </td>
        <td style="text-align: center;">
            <input id="frmUseExpenses[PayrollRef,Employees]" name="frmUseExpenses[PayrollRef,Employees]" value="True" type="checkbox" checked="checked" />
        </td>
    </tr>

What I want to do is when the #frmEmployee checkbox is checked/unchecked it will also check/uncheck the other two checkboxes in that same row only.

The script I have which isn't yet doing this is:

<script type="text/javascript">
jQuery(document).ready(function(){  
   jQuery("[id=^frmEmployee]").change(function(){
        var selected = jQuery(this);
        var scope = jQuery(this).parent("tr");
        jQuery("[id=^frmUseTimesheets]",scope).attr('checked', selected.is(':checked'));
        jQuery("[id=^frmUseExpenses]",scope).attr('checked', selected.is(':checked'));
    });
});
</script>

Is it something obvious that's wrong?

Thanks

David

New Post
7/30/2011 11:59 AM
 

Since your other checkboxes have unique ids/names, you can just change them directly without having to worry about scope.  You also need to make your id for frmEmployee unique.  The name doesn't have to be (it will just save the values as delimited).  

<table>
    <tr>
        <td style="text-align: center;">
            <input id="frmEmployee1" name="frmEmployee" value="1" type="checkbox" checked="checked" />
        </td>
        <td>Joe Employee 1</td>
        <td style="text-align: center;">
            <input id="frmUseTimesheets1" name="frmUseTimesheets1" value="True" type="checkbox" checked="checked" />
        </td>
        <td style="text-align: center;">
            <input id="frmUseExpenses1" name="frmUseExpenses1" value="True" type="checkbox" checked="checked" />
        </td>
    </tr>
    <tr>
        <td style="text-align: center;">
            <input id="frmEmployee2" name="frmEmployee" value="2" type="checkbox" checked="checked" />
        </td>
        <td>Joe Employee 2</td>
        <td style="text-align: center;">
            <input id="frmUseTimesheets2" name="frmUseTimesheets2" value="True" type="checkbox" checked="checked" />
        </td>
        <td style="text-align: center;">
            <input id="frmUseExpenses2" name="frmUseExpenses2" value="True" type="checkbox" checked="checked" />
        </td>
    </tr>
    <tr>
        <td style="text-align: center;">
            <input id="frmEmployee3" name="frmEmployee" value="3" type="checkbox" checked="checked" />
        </td>
        <td>Joe Employee 3</td>
        <td style="text-align: center;">
            <input id="frmUseTimesheets3" name="frmUseTimesheets3" value="True" type="checkbox" checked="checked" />
        </td>
        <td style="text-align: center;">
            <input id="frmUseExpenses3" name="frmUseExpenses3" value="True" type="checkbox" checked="checked" />
        </td>
    </tr>
</table>
 
<script type="text/javascript">
jQuery(document).ready(function(){   
   jQuery("input[name='frmEmployee']").change(function(){
        var selected = jQuery(this).attr("checked");
        var id = jQuery(this).val();
        jQuery("#frmUseTimesheets"+id).attr('checked', selected);
        jQuery("#frmUseExpenses"+id).attr('checked', selected);
alert ('selected:' + selected + ' id:' + id);
    });
});
</script>

 

Previous
 
Next
HomeHomeCoreCoreGeneralGeneral'small' jQuery problem


 

New York, NY • Baltimore, MD • Vienna, VA • St. Louis, MO • Seattle, WA • info@openwebstudio.com

Bookmark & Share Bookmark and Share