javascript - 使用复选框列表中的 jquery 追加文本

Question

我在 ASP.NET 项目中工作。我的任务是将 Checkbox 文本附加到 TextBox。 复选框的文本是从CheckBoxList中的数据库值绑定(bind)的。

protected void prbtn_Click(object sender, EventArgs e)
{
    string ConnectionString = "Data Source=.;Initial Catalog=nci;Integrated Security=true";
    SqlConnection myConn = new SqlConnection(ConnectionString);
    List<string> minire = new List<string>();
    string sql = "SELECT distinct PRIMARY_MINI_REGION FROM customers";
    myConn.Open();
    SqlCommand cmd = new SqlCommand(sql, myConn);
    SqlDataAdapter adapter = new SqlDataAdapter(cmd);
    DataTable dt = new DataTable();
    adapter.Fill(dt);
    minire.Add(dt.Rows[0][0].ToString());
    group12.DataSource = dt;
    group12.DataTextField = "PRIMARY_MINI_REGION";
    group12.DataValueField = "PRIMARY_MINI_REGION";
    group12.DataBind();
    string[] grpary = prgrp.Text.Split(';');

    foreach (var items in grpary)
    {
        if (items != "")
        {
            li.Add(items.ToString());
            if (li.Contains(items.ToString()))
            {
                group12.Items.FindByText(items.ToString()).Selected = true;
                //group12.Items.FindByText(items.ToString()).Enabled = false;
            }
        }
    }
}

你们中的任何人都可以帮助我如何在 jquery 中做到这一点。目前我使用 C# 使用 stringbuilder 附加文​​本

protected void group_SelectedIndexChanged(object sender, EventArgs e)
{
    foreach (ListItem l in group12.Items)
    {
        if (l.Selected)
        {
            li.Add(l.Text);
        }
    }
    foreach (var i in li)
    {
        si.Append(i.ToString() + ";");
    }
    //if (prgrp.Text == "")
    //    prgrp.Text = si.ToString();
    //else
    prgrp.Text = si.ToString();
}

一旦我选择复选框意味着它必须附加文本。一旦我取消选中它意味着必须从文本框中删除内容

Answer 1

我想这段代码可以帮助您:

$(function() {
	$('input[type="checkbox"]').change(function() {
		// Reset output:
		$("#output").html('');
		
		// Repeat for all checked checkboxes:
		$('input[type="checkbox"]:checked').each(function(){ 
			
			// Get values:
			var existingText = $("#output").html();
			var textToAppend = $(this).val();
			
			// Append seperator (';') if neccessary:
			if(existingText != '')
			{
				existingText = existingText + ";";
			}
			
			// Print out append value:
			$("#output").html(existingText + textToAppend);
		});
	});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h2>Select:</h2>
<input type="checkbox" value="Jan"/>Jan
<input type="checkbox" value="Feb"/>Feb
<input type="checkbox" value="Mar"/>Mar
<input type="checkbox" value="Apr"/>Apr

<h2>Output:</h2>
<div id="output"></div>