如何将文本框追加到复选框列表项，该复选框列表项来自选择列表项的 SharePoint 列表

how to append a textbox to a checkbox list item which is coming from a sharepoint list on select of a list item

本文关键字：列表 复选框 SharePoint 选择 文本 追加      更新时间：2023-09-26

我有一个自定义输入表单，其中一些字段来自 SharePoint 2010 中的列表。我有一个由列表项填充的复选框控件。大约有 10 行。

现在，我希望当用户选择复选框列表项时，它旁边应该会出现一个文本框。 例如，我有一个名为主题的列表，它有列名标题，条目是物理、数学、化学等......现在，当用户从复选框列表中选择物理时，旁边应该会出现一个文本框，用户应该能够在文本框上书写。

protected void chkbox1_SelectedIndexChanged(object sender, EventArgs e)
{
   foreach (ListItem checkbox in chkbox1.Items)
   {
      //If this particular item is checked
      if (checkbox.selected)
      {
         checkbox.Text = String.Format("{0}<input id='"TextBox{0}'" name='"TextBox{0}'" / >", checkbox.Value);
         //TextBox tb = new TextBox { ID = checkbox.Value };
         //Input.Controls.Add(tb);
      }
   }
}
我根据

你的描述做了一些猜测。您可以通过JQuery执行此操作： https://jsfiddle.net/Twisty/pw0vrvfh/

.HTML

<form>
  <ul>
    <li>
      <input type="checkbox" id="chk-01" />
      <label for="chk-01">Physics</label>
    </li>
    <li>
      <input type="checkbox" id="chk-02" />
      <label for="chk-02">Math</label>
    </li>
    <li>
      <input type="checkbox" id="chk-03" />
      <label for="chk-03">Chemistry</label>
    </li>
    <li>
      <input type="checkbox" id="chk-04" />
      <label for="chk-04">Label 4</label>
    </li>
    <li>
      <input type="checkbox" id="chk-05" />
      <label for="chk-05">Label 5</label>
    </li>
    <li>
      <input type="checkbox" id="chk-06" />
      <label for="chk-06">Label 6</label>
    </li>
    <li>
      <input type="checkbox" id="chk-07" />
      <label for="chk-07">Label 7</label>
    </li>
    <li>
      <input type="checkbox" id="chk-08" />
      <label for="chk-08">Label 8</label>
    </li>
    <li>
      <input type="checkbox" id="chk-09" />
      <label for="chk-09">Label 9</label>
    </li>
    <li>
      <input type="checkbox" id="chk-10" />
      <label for="chk-10">Label 10</label>
    </li>
  </ul>
</form>

杰奎里

$(document).ready(function() {
  $("input[id^='chk-']").change(function() {
    if ($(this).is(":checked")) {
      var chkId = $(this).attr("id");
      var inpId = chkId.substring(chkId.indexOf("-") + 1);
      var $inp = $("<input />", {
        type: "text",
        name: "TextBox" + inpId,
        id: "TextBox" + inpId
      });
      $(this).next("label").after($inp);
    } else {
      var chkId = $(this).attr("id");
      var inpId = chkId.substring(chkId.indexOf("-") + 1)
      $("#TextBox"+inpId).remove();
    }
  });
});

为了保持一致性，将使用当前checkbox的 ID 创建新的input。您可以轻松地将 ID 更改为 value 甚至数组：如果您愿意，可以更改TextBox[]。

我绑定到.change()事件，以便每次都可以检查checkbox的状态。这允许用户改变主意。您还可以在删除文本之前从input中收集文本。将其放入.data()以防用户取消选中错误的。如果有该复选框的数据，您可以在下次选中时替换它。示例：https://jsfiddle.net/Twisty/pw0vrvfh/2/

相关文章：