如何在选择列表项时将文本框附加到来自共享点列表的复选框列表项

Posted 2023-02-19

【中文标题】如何在选择列表项时将文本框附加到来自共享点列表的复选框列表项

【英文标题】：how to append a textbox to a checkbox list item which is coming from a sharepoint list on select of a list item

【发布时间】：2016-04-23 16:29:53

【问题描述】：

我有一个自定义输入表单，其中一些字段来自 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=\"TextBox0\" name=\"TextBox0\" / >", checkbox.Value);
         //TextBox tb = new TextBox  ID = checkbox.Value ;
         //Input.Controls.Add(tb);
      
   

【问题讨论】：

您的需求使用 javascript 似乎要简单得多。我不会为此使用 C#。 :)

请提供一些 SP 显示的示例代码。

@Thibault Gandon 你能帮我解决一下吗。

【参考方案1】：

我根据你的描述做了一些猜测。这是您可以通过 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>

JQuery

$(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();
    
  );
);

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

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

【讨论】：

问题是复选框列表项来自 SharePoint 列表

好的，提供一些示例上下文。

我在 sharepoint 中有一个名为 Subjects 的列表，其中包含一些名为物理、数学等的项目。我创建了一个可视化 Web 部件。 chkbox1 是可视部分中控件的名称，它绑定到 SP 中的 Subjects 列表。现在我希望当用户选择列表框项目 1 时，它旁边应该出现一个文本框。该列表是一个多选复选框列表。

问题是如何获取复选框列表项选中的id？以及如何将其绑定到文本框。用户应该能够在文本框中输入自定义数据并存储数据。