我们可以在 html 的文本区域内包含一个复选框吗？答案

【问题标题】：Can we include a checkbox inside a text area in html?我们可以在 html 的文本区域内包含一个复选框吗？
【发布时间】：2020-07-21 18:16:15
【问题描述】：

我们可以在 html 的文本区域中获得一个复选框吗？？

我正在尝试开发用户界面，我将分享代码

<textarea title="JSON Input" id="json_data"  ></textarea>

在此，我需要添加一个复选框，以便我将给出多少行 json，每行中应该带有相应的复选框。

假设在我的文本区域中，我正在输入 5 行的 json，我应该在文本区域中获取这 5 行，然后在行尾的复选框。

<input type="checkbox" onclick="if(this.checked){myFunction()}">

我正在使用上面的脚本来获取复选框，但我没有得到所需的输出。我们可以为此使用任何正则表达式吗？？

【问题讨论】：

你能为此创建一个演示吗？
是的，我会的，请到这里

标签： javascript html json regex checkbox

【解决方案1】：

将标签放入文本框中是不可能的，也不漂亮。我不知道您的建议，但我在一个 sn-p 中创建了两个示例，可以帮助您

.request-input {
  margin: 15px;
  padding: 15px;
  color: #000;
  background-color: #fff;
  border: 1px solid #000;
}

.request-input .form-group {
  margin-bottom: 0;
  padding-left: 25px;
}

.request-input .form-group input {
  padding: 0;
  border: none;
}

.request-input .form-group .field-name::before,
.request-input .form-group .field-value::before,
.request-input .form-group .field-name::after,
.request-input .form-group .field-value::after {
  content: "\"";
}

<form class="request-input">
  <div class="row">
    <div class="brace">{</div>
  </div>
  <!-- here are two inputs for the names and values -->
  <div class="row">
    <div class="form-group">
      <span class="field-name">
        <input type="text" name="field-name[]" class="field-input" value="name" />
      </span>
      <span class="colon">:</span>
      <span class="field-value">
        <input type="text" name="field-value[]" class="field-input" value="Ashish" />
      </span>
      <span class="comma">,</span>
      <span class="field-active">
        <input type="checkbox" name="field-active[]" class="field-input" checked="checked" />
      </span>
    </div>
  </div>
  <div class="row">
    <div class="form-group">
      <span class="field-name">
        <input type="text" name="field-name[]" class="field-input" value="id" />
      </span>
      <span class="colon">:</span>
      <span class="field-value">
        <input type="number" name="field-value[]" class="field-input" value="007" />
      </span>
      <span class="field-active">
        <input type="checkbox" name="field-active[]" class="field-input" checked="checked" />
      </span>
    </div>
  </div>
  <br />
  <!-- here is only one input for the names and values -->
  <div class="row">
    <div class="form-group">
      <span class="field">
        <input type="text" name="field[]" class="field-input" value="&quot;name&quot;:&quot;Ashash&quot;," />
      </span>
      <span class="field-active">
        <input type="checkbox" name="field-active[]" class="field-input" checked="checked" />
      </span>
    </div>
  </div>
  <div class="row">
    <div class="form-group">
      <span class="field">
        <input type="text" name="field[]" class="field-input" value="&quot;id&quot;:&quot;007&quot;" />
      </span>
      <span class="field-active">
        <input type="checkbox" name="field-active[]" class="field-input" checked="checked" />
      </span>
    </div>
  </div>
  <div class="row">
    <div class="brace">}</div>
  </div>
</form>

【讨论】：