Home>

checkboxlist is the server control,Binding data is easy,Getting the selected value on the server side is also easy.However, the generated static page does not have the value of listitem, so by default js cannot get the value of listitem in the page. As for why the value is not displayed, I am not clear,This article gives a method to get checkboxlist value using jquery.

First look at the original page html code:

<asp:checkboxlist runat="server">
</asp:checkboxlist>
<input type="button" value="show selected value" />

Below we bind the checkboxlist, the code is as follows:

if (dt!=null&&dt.rows.count>0)
{
  foreach (datarow dr in dt.rows)
  {
    //respectively text value and value
    listtest.items.add (new listitem (dr ["title"]. tostring (), dr ["id"]. tostring ()));
  }
}

The html code generated in the page is as follows:

<table border="0"&​​gt;
<tr>
  <td>
    <input type="checkbox" name="listtest $0" />
    <label for="listtest_0">A shake effect based on jquery</label>
  </td>
  </tr>
<tr>
  <td><input type="checkbox" name="listtest $1" />
    <label for="listtest_1">Changing thumbnail size using CSS's overflow attribute</label>
  </td>
</tr>
</table>

It can be seen that the checkboxlist is converted into a table form,And there is no value in it. The value in label is the text value. When clicking on it,You can also select the checkbox, which improves the user experience when selecting the checkbox.

Enter our processing process below,First, when binding the checkboxlist, add an alt attribute to each object of the listitem, and the value stores the corresponding value. The code is as follows:

if (dt!=null&&dt.rows.count>0)
{
  foreach (datarow dr in dt.rows)
  {
    //respectively text value and value
    listtest.items.add (new listitem (dr ["title"]. tostring (), dr ["id"]. tostring ()));
  }
  //Add the alt attribute to the listitem object, and save the value
  foreach (listitem li in listtest.items)
  {
    li.attributes.add ("alt", li.value);
  }
}

Now, the generated html code is as follows:

<table border="0"&​​gt;
<tr>
  <td>
    <span><input type="checkbox" name="listtest $0" />
    <label for="listtest_0">A shake effect based on jquery</label></span>
  </td>
</tr>
<tr>
  <td><span><input type="checkbox" name="listtest $1" />
  <label for="listtest_1">Change thumbnail size using CSS's overflow attribute</label></span>
  </td>
</tr>
</table>

As can be seen from above,With one more span tag, the value of alt in it is the value we need. Use the following jquery code to get:

$(document) .ready (function () {
  $("#btnshow"). click (function () {
    var valuelist="";//Save checkbox selected value
    //traverse the checkbox whose name starts with listtest
    $("input [name ^ =" listtest "]"). each (function () {
      if (this.checked) {
        //$(this):the current checkbox object;
        //$(this).parent("span "):checkbox parent span object
        valuelist +=$(this) .parent ("span"). attr ("alt") + ",";
      }
    });
    if (valuelist.length>0) {
      //Get the selected checkbox value sequence, the result is 400,398
      valuelist=valuelist.substring (0, valuelist.length-1);
    }
  });
});
  • Previous Android way to create shortcuts through apps
  • Next Simple understanding of Java abstract classes