Dynamically select all items in a Multi-Select listbox using jquery
<p>I'm very new to using Javascript/Jquery, so I appreciate you reading and your patience with what is likely a simple problem. This is a bit of a multi-tiered question, so let me explain.</p>

<p>I have several databound ASP listboxes. I also have several checkboxes, one for each listbox. I have the checkboxes wired, using Javascript, to select or deselect all the Listbox items on click. </p>

<p>My goal was to construct a single method that will pass the checkbox and its corresponding listbox to the javascript method and either select or unselect everything in the listbox. I could do this very simply in C#, but we can't use a postback, as the page is already slow and complex.</p>

<p>So this already WORKS in Javascript (and I'll post my code below this), but the problem I'm encountering is that when we have a longer listbox (that is, 20+ list items), IE essentially makes you watch as it scrolls through all of them and selects them all. Chrome doesn't have this problem, and Firefox is at least a lot faster, but IE is the browser a good 75%+ of our customers use.</p>

<p>ASP:</p>

<pre><code>&lt;asp:ListBox ID="StatusListBx" runat="server" DataSourceID="StatusLds" 
    DataTextField="Status" DataValueField="StatusID"  Width="140px" Height="55px" AppendDataBoundItems="true"
    SelectionMode="Multiple"/&gt; 
&lt;asp:LinqDataSource ID="StatusLds" runat="server" 
    ContextTypeName="ElementDataConnector.ElementDBDataContext" 
    Select="new (StatusID, Status)" Where="StatusID &lt; 4" TableName="Lookup_Status" &gt;
&lt;/asp:LinqDataSource&gt;
&lt;br /&gt;
&lt;asp:CheckBox id="SelectAllProjectStatusChkbx" runat="server" Text="Select All" /&gt;
</code></pre>

<p>C#:</p>

<pre><code>protected void Page_Load(object sender, EventArgs e)
{
    SelectAllProjectStatusChkbx.Attributes.Add("onclick", "selectDeselect(" + StatusListBx.ClientID + ",this)");
}
</code></pre>

<p>Javascript:</p>

<pre><code>function selectDeselect(listbox, checkbox) {
    if (checkbox.checked) {
        var multi = document.getElementById(listbox.id);
        for (var i = 0; i &lt; multi.options.length; i++) {
            multi.options[i].selected = true;
        }
    } else {
        var multi = document.getElementById(listbox.id);
        multi.selectedIndex = -1;
    }
}
</code></pre>

<p>(I've replicated this for every applicable Listbox/Checkbox combination - it's a scalable task)</p>

<p>So to the actual questions:</p>

<ol>
<li><p>Were I to utilize JQuery rather than Javascript for this functionality, would I be able to avoid that whole "scrolling/selecting" effect?</p></li>
<li><p>If I can avoid that scrolling effect, how can I dynamically pass the listbox to JQuery rather than having to write a custom method out for each Listbox/Checkbox combination?</p></li>
</ol>

<p>Thank you for reading and thank you for any help offered.</p>
