如何将Javascript与动态填充的checkboxList集成？

Question

I have this checkboxList control that I manually populated with data and fully integrated with JavaScript:

<script type="text/javascript">
    function ShowHide(chk, txt,txt2) {
        //Get the Textbox based on selected checkbox
        ctrltxt = document.getElementById(txt);
        ctrltxt2= document.getElementById(txt2);
        //Check if checkbox is checked or not
        if (chk.checked) {
           //Show the Textbox
           ctrltxt.style.display = 'block';
           ctrltxt2.style.display = 'block';
         } else {
           //Hide the textbox
           ctrltxt.style.display = 'none';
           ctrltxt2.style.display = 'none';
         }
     }
     </script>

        <table style="border: 0; border-style: solid">
            <tr valign="top" style="background-color: #f5f7f7; font-size: large; white-space: nowrap;">
                <td style="font-size: large; font-weight: bold;">Request a Review of:</td>
                <td>
                 <asp:CheckBoxList ID="ckRequestReview" runat="server" CssClass="cb" Style="border-width: 0;" RepeatDirection="horizontal" RepeatColumns="4" RepeatLayout="Table">
                <asp:ListItem onclick="ShowHide(this,'txtTitleChange','classtitles');">Job Title</asp:ListItem>
                <asp:ListItem onclick="ShowHide(this,'txtPayGradeChange','gradeclass');">Pay Grade</asp:ListItem>
                <asp:ListItem onclick="ShowHide(this,'txtClassSpecChange','clssSpec');">Specs</asp:ListItem>
                </asp:CheckBoxList>
                </td>
            </tr>
        </table>

Above is just relevant code to this question.

When a user selects for instance Job Title from the ckRequestReview checkboxlist control, txtTitleChange and classtitles are exposed allowing users to enter data into them.

This works a treat.

However, due to a change request by users to allow for any selected list item from the checkboxlist to remain selected, I decided to use checkboxlist is dynamically populated from the database.

Below is the new checkboxList:

    Private Sub PopulateChoices()

    Using conn As New SqlConnection()

        conn.ConnectionString = ConfigurationManager.ConnectionStrings("CNchoices").ConnectionString()

        Using cmd As New SqlCommand()

            cmd.CommandText = "select * from muytable"
            cmd.Connection = conn

            conn.Open()

            Using sdr As SqlDataReader = cmd.ExecuteReader()

                While sdr.Read()

                    Dim item As New ListItem()

                    item.Text = sdr("ckRequestReview").ToString()

                    item.Value = sdr("ID").ToString()

                    item.Selected = Convert.ToBoolean(sdr("IsSelected"))

                    ckRequestReview.Items.Add(item)

                End While

            End Using

            conn.Close()

        End Using

    End Using

End Sub

Question:

How do I integrate JavaScript above with this dynamically populated version of the same checkboxList just as I did with the manually populated checkboxList?

This way, whenever a user completes the form and selects any of the items on the checkboxlist list, the selected item remains selected for a particular user?

I could do this if I query the DB in another page but users want everything done on one page.

Answer 1

You can use the Attributes collection to add client-side attributes to a ListItem .

Below is some sample code for how to go about it.

   While sdr.Read()

       Dim item As New ListItem()

       '-- just a sample... set the appropriate javascript code here
       item.Attributes.Add("onclick", "ShowHide(this,'txtTitleChange','classtitles');") 

       item.Text = sdr("ckRequestReview").ToString()

       item.Value = sdr("ID").ToString()

       item.Selected = Convert.ToBoolean(sdr("IsSelected"))

       ckRequestReview.Items.Add(item)

   End While

( NB: freehand typed code meant only for explaining the concept. might contain typos)