如何创建数组索引复选框（静态索引）

Question

如何创建数组索引复选框（静态索引）

示例
第一个复选框：1
第二个复选框：2
第三个复选框：3

未选中或未选中时保留在同一位置。 并且我想显示数字索引（第一个第二个和第三个）前面的复选框。

我想知道如何编写代码，如果您愿意，我很乐意提供更多信息。

function selectsurvey() {
  var length = document.selectchoice.checkbox.length;
  var $result = "";
  var chked = 0;
  for (i = 0; i < length; i++) {
    if (document.selectchoice.checkbox[i].checked) {
      $result += document.selectchoice.checkbox[i].value;
    }
  }
  var Data = $result;

  for (i = 0; i < length; i++) {
    if (document.selectchoice.checkbox[i].checked) {
      chked += 1;
    }
  }
  var sp = Data.split("");
  document.getElementById("showtext").value = sp;
  document.getElementById("showselectednumber").value = chked;


}

<div id="sectionsurvey">
  <form action="" method="post" id="selectchoice" name="selectchoice">
    <h3 style="color:#000000;text-indent: 1.2em;">What language do you like to write?</h3>
    <div class="row" style="padding: 20px;">
      <div class="row">
        <div class="col-md-4 col-sm-4" style="display: flex;">
          <div class="col-md-2 form-type-radio">
            <input class="single-checkbox" type="checkbox" id="edit-submitted-checkbox1" name="checkbox" value="1" onclick="selectsurvey();" /><span></span>
          </div>
          <div class="col-md-8" style="left: -1.3em;">
            <p class="text-choice-survey">HTML</p>
          </div>
        </div>
        <div class="col-md-4 col-sm-4" style="display: flex;">
          <div class="col-md-2 form-type-radio">
            <input class="single-checkbox" type="checkbox" id="edit-submitted-checkbox2" name="checkbox" value="2" onclick="selectsurvey();" /><span></span>
          </div>
          <div class="col-md-8" style="left: -1.3em;">
            <p class="text-choice-survey">CSS</p>
          </div>
        </div>
        <div class="col-md-4 col-sm-4" style="display: flex;">
          <div class="col-md-2 form-type-radio">
            <input class="single-checkbox" type="checkbox" id="edit-submitted-checkbox3" name="checkbox" value="3" onclick="selectsurvey();" /><span></span>
          </div>
          <div class="col-md-8" style="left: -1.3em;">
            <p class="text-choice-survey">JAVASCRIPT</p>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-4 col-sm-4" style="display: flex;">
          <div class="col-md-2 form-type-radio">
            <input class="single-checkbox" type="checkbox" id="edit-submitted-checkbox4" name="checkbox" value="4" onclick="selectsurvey();" /><span></span>
          </div>
          <div class="col-md-8" style="left: -1.3em;">
            <p class="text-choice-survey">PYTHON</p>
          </div>
        </div>
        <div class="col-md-4 col-sm-4" style="display: flex;">
          <div class="col-md-2 form-type-radio">
            <input class="single-checkbox" type="checkbox" id="edit-submitted-checkbox5" name="checkbox" value="5" onclick="selectsurvey();" /><span></span>
          </div>
          <div class="col-md-8" style="left: -1.3em;">
            <p class="text-choice-survey">ANGULAR</p>
          </div>
        </div>
        <div class="col-md-4 col-sm-4" style="display: flex;">
          <div class="col-md-2 form-type-radio">
            <input class="single-checkbox" type="checkbox" id="edit-submitted-checkbox6" name="checkbox" value="6" onclick="selectsurvey();" /><span></span>
          </div>
          <div class="col-md-8" style="left: -1.3em;">
            <p class="text-choice-survey">ORACLE</p>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-4 col-sm-4" style="display: flex;">
          <div class="col-md-2 form-type-radio">
            <input class="single-checkbox" type="checkbox" id="edit-submitted-checkbox7" name="checkbox" value="7" onclick="selectsurvey();" /><span></span>
          </div>
          <div class="col-md-8" style="left: -1.3em;">
            <p class="text-choice-survey">PERL</p>
          </div>
        </div>
        <div class="col-md-4 col-sm-4" style="display: flex;">
          <div class="col-md-2 form-type-radio">
            <input class="single-checkbox" type="checkbox" id="edit-submitted-checkbox8" name="checkbox" value="8" onclick="selectsurvey();" /><span></span>
          </div>
          <div class="col-md-8" style="left: -1.3em;">
            <p class="text-choice-survey">C# / C++</p>
          </div>
        </div>
      </div>
    </div>
    <input type="text" id="showtext">
    <input type="text" id="showselectednumber">
  </form>
</div>