我怎么能得到一个复选框文本在<光>标记，并在jQuery中的另一个标签中显示

How can i get a checkbox text inside a <li> tag and show this in another label in jQuery?

本文关键字：并在 标记 jQuery 怎么能 显示 标签 另一个 一个 复选框 文本      更新时间：2023-09-26

我想在下面的代码中做的是一个jQuery代码:

  1. 如果CheckBox1被选中，'selectedCheckBox'标签文本变成"Item 1" (checkbox2和3也一样)

  2. (DONE)如果选择了2个或更多的复选框，'selectedCheckBox'标签文本变为"Group"

<asp:Label ID="selectedCheckBox" runat="server" Text="Selected Checkbox Here!"></asp:Label>
......
<ul>
    <li>
        <asp:CheckBox id="CheckBox1 "runat="server" />Item 1</li>
            <li>
            <asp:CheckBox id="CheckBox2" runat="server" />Item 2</li>
        <li>
            <asp:CheckBox id="CheckBox3" runat="server" />Item 3</li>
</ul>

HTML:

   <asp:Label ID="selectecCheckBox" CssClass="selectBox" runat="server" Text="Selected Checkbox Here!"></asp:Label>
            <ul>
                <li>
                    <asp:CheckBox ID="CheckBox1" runat="server" Text="Item 1" /></li>
                <li>
                    <asp:CheckBox ID="CheckBox2" runat="server" Text="Item 2" /></li>
                <li>
                    <asp:CheckBox ID="CheckBox3" runat="server" Text="Item 3" /></li>
            </ul>
jQuery: 

<script type="text/javascript">
    $(document).ready(function () {
        $(document).on("change", "input:checkbox", function () {
            if(this.checked)
                SetLabelText(this.nextSibling.innerText);
        });
    });
    function SetLabelText(label) {
        $(".selectBox").text(label);
    }
</script>

试试:

<ul>
    <li>
        <asp:CheckBox id="CheckBox1 "runat="server" OnCheckedChanged="CheckboxClick" Text="Item 1"/>
    </li>
    <li>
        <asp:CheckBox id="CheckBox2" runat="server" OnCheckedChanged="CheckboxClick" Text="Item 2"/>
    </li>
    <li>
        <asp:CheckBox id="CheckBox3" runat="server"  OnCheckedChanged="CheckboxClick" Text="Item 3"/>
    </li>
</ul>

在后面的代码中使用如下代码:

protected void CheckboxClick(object sender, EventArgs e)
{
    this.selectecCheckBox.Text = ((CheckBox)sender).Checked ? 
        ((CheckBox)sender).Text : 
        this.selectecCheckBox.Text;
}
相关文章：