Question

我希望在Listbox控件的输出的任一侧添加一些html，使它看起来像这样：

<div class="scroll_tickbox">

                            <div class="option first"><label><input type="checkbox" value="1" title="Active Retirement Network" />Active Retirement Network</label></div><br />

                            <div class="option"><label><input type="checkbox" value="2" title="Boardmatch" />Boardmatch</label></div><br />
                            <div class="option"><label><input type="checkbox" value="3" title="Border Counties Childcare Network" />Border Counties Childcare Network</label></div><br />
                            <div class="option"><label><input type="checkbox" value="4" title="Carmichael Centre for Voluntary Groups" />Carmichael Centre for Voluntary Groups</label></div><br />


                            <div class="option"><label><input type="checkbox" value="26" title="Volunteer Centres Ireland" />Volunteer Centres Ireland</label></div><br />
                        </div><!--scroll_tickbox-->

目前我正在获得这样的输出

<table id="ctl00_MainContent_CertifiedStandards" class="multipleselect uniform" SelectionMode="Multiple" border="0" style="height:115px;">
<tr>
    <td><input id="ctl00_MainContent_CertifiedStandards_0" type="checkbox" name="ctl00$MainContent$CertifiedStandards$0" /><label for="ctl00_MainContent_CertifiedStandards_0">PQASSO</label></td>
</tr><tr>

    <td><input id="ctl00_MainContent_CertifiedStandards_1" type="checkbox" name="ctl00$MainContent$CertifiedStandards$1" checked="checked" /><label for="ctl00_MainContent_CertifiedStandards_1">Fund raising</label></td>
</tr><tr>
    <td><input id="ctl00_MainContent_CertifiedStandards_2" type="checkbox" name="ctl00$MainContent$CertifiedStandards$2" /><label for="ctl00_MainContent_CertifiedStandards_2">Corporate governance</label></td>
</tr><tr>
    <td><input id="ctl00_MainContent_CertifiedStandards_3" type="checkbox" name="ctl00$MainContent$CertifiedStandards$3" checked="checked" /><label for="ctl00_MainContent_CertifiedStandards_3">Child protection</label></td>
</tr><tr>
    <td><input id="ctl00_MainContent_CertifiedStandards_4" type="checkbox" name="ctl00$MainContent$CertifiedStandards$4" checked="checked" /><label for="ctl00_MainContent_CertifiedStandards_4">Use of images</label></td>

</tr><tr>
    <td><input id="ctl00_MainContent_CertifiedStandards_5" type="checkbox" name="ctl00$MainContent$CertifiedStandards$5" checked="checked" /><label for="ctl00_MainContent_CertifiedStandards_5">HIV/Aids</label></td>
</tr><tr>
    <td><input id="ctl00_MainContent_CertifiedStandards_6" type="checkbox" name="ctl00$MainContent$CertifiedStandards$6" /><label for="ctl00_MainContent_CertifiedStandards_6">NGDO charter</label></td>
</tr><tr>
    <td><input id="ctl00_MainContent_CertifiedStandards_7" type="checkbox" name="ctl00$MainContent$CertifiedStandards$7" /><label for="ctl00_MainContent_CertifiedStandards_7">Volunteering and humanitarian aid</label></td>
</tr><tr>

    <td><input id="ctl00_MainContent_CertifiedStandards_8" type="checkbox" name="ctl00$MainContent$CertifiedStandards$8" /><label for="ctl00_MainContent_CertifiedStandards_8">Human resources</label></td>
</tr>

使用这样的代码

public void BuildListboxes()
{
    //Bind items for Certified Standards listbox
    CertifiedStandards.DataSource = GetCertifiedStandards();
    CertifiedStandards.DataValueField = "ID";
    CertifiedStandards.DataTextField = "name";
    CertifiedStandards.DataBind();
}

public DataTable GetCertifiedStandards()
{
    SqlConnection con = new SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings["DBConnectionString"].ConnectionString);
    con.Open();
    SqlCommand com = new SqlCommand("spGetCertifiedStandards", con);
    com.CommandType = CommandType.StoredProcedure;
    SqlDataAdapter ada = new SqlDataAdapter(com);
    DataTable dt = new DataTable();
    ada.Fill(dt);
    return dt;
}

我想这样做的原因是为这些复选框添加一些jQuery控件。

如果有人对如何实现这一点有任何提示，我真的很感激。

谢谢，安德鲁

Answer 1

使用JQuery，您不必执行以下操作：

<input type='checkbox' class='option' ... onclick='runJqueryFunction(this);' />

为什么不用标准将GUI元素连接到JQuery代码：

`$(function(){
    //Do your wiring up here, either to IDs of elements or style classes

    $('.option').change(function(){//Runs when an object with class='option' changes value.
    alert('I am a checkbox with an ID = ' + $(this).attr('id'));
});

$('#MyCheckbox1001').change(function(){//Runs when an object with ID='MyCheckbox1001' changes value.
    alert('I am a checkbox with an ID = ' + $(this).attr('id'));
});

}）;'

编辑：

如果你使用范围来限制你的选择器，它可能是最好的。

E.g。

$(".option")在您的网页上匹配任何带有class ='option'的对象。如果您有一个如下所示的页面：

<div class="scroll_tickbox" id='patricksDiv1'>
    <input type='checkbox' class='option' value='1' />
    <input type='checkbox' class='option' value='2' />
</div>

<div class="scroll_tickbox" id='patricksDiv2'>
    <input type='checkbox' class='option' value='3' />
    <input type='checkbox' class='option' value='4' />
</div>

$('.scroll_tickbox .option')将匹配任何带有class ='option'的对象，该对象是INSIDE与class ='scroll_tickbox'的元素，并且会给你4个项目。

$('#patricsDiv1 .option')将匹配任何具有class ='option'的对象，该对象位于ID ='patricksDiv1'的元素内（2项） - 这可用于限制运行JQuery方法的内容，因为ID必须在HTML文档中是唯一的。

将HTML标记附加到ASP.NET Listbox / Checkboxlist

1 个答案: