Javascript 将复选框文本值保存到数组

我一整天都在试图找到一个好的解决方案，我相信我已经接近了，但我无法找到最终的解决方案。我试图做的是将选中（仅选中）的复选框文本值保存到数组中，以便最终将其保存到数据库中。现在，如果我做到以下几点，我就能做到：

yourArray.push($('label[for=checkbox3]').text());

但是，我希望避免使用特定的“for=checkbox3”，而只是自动获取这些选中复选框的文本值。一旦它正常工作，我将把阵列内容保存到本地存储中。感谢您的帮助

HTML:

<form role="form" action="" class="margin-top-fortypx">
   <div class="checkbox checkbox-container">
      <label class="checkbox-label" for="checkbox1">
         <input type="checkbox" id="checkbox1" name="type" class="remove-bootstrap checkbox-circle margin-right checkbox-js" value="true" />
          Option #1
       </label>
    </div>

    <div class="checkbox checkbox-container">
       <label class="checkbox-label" for="checkbox2">
          <input type="checkbox" id="checkbox2" name="type" class="remove-bootstrap checkbox-circle margin-right checkbox-js" value="true" />
           Option #2
        </label>
     </div> 
  </form>

function jobType() {

  // Not trying to do this for the 6+ checkboxes
  // var text = $('label[for=checkbox1]').text();
  // var textt = $('label[for=checkbox2]').text();
  // var texttt = $('label[for=checkbox3]').text();
  var yourArray = [];

  $("input:checkbox[name=type]:checked").each(function() {
    yourArray.push($('label[for=checkbox3]').text());
  });

  alert(yourArray);

  localStorage.setItem('jobs-selected', text);
  var job = localStorage.getItem("jobs-selected");

}

当前复选框表单的图像：

<form role="form" action="" class="margin-top-fortypx">
   <div class="checkbox checkbox-container">
      <label class="checkbox-label" for="checkbox1">
         <input type="checkbox" id="checkbox1" name="type" class="remove-bootstrap checkbox-circle margin-right checkbox-js" value="true" />
          Option #1
       </label>
    </div>

    <div class="checkbox checkbox-container">
       <label class="checkbox-label" for="checkbox2">
          <input type="checkbox" id="checkbox2" name="type" class="remove-bootstrap checkbox-circle margin-right checkbox-js" value="true" />
           Option #2
        </label>
     </div> 
  </form>

function jobType() {

  // Not trying to do this for the 6+ checkboxes
  // var text = $('label[for=checkbox1]').text();
  // var textt = $('label[for=checkbox2]').text();
  // var texttt = $('label[for=checkbox3]').text();
  var yourArray = [];

  $("input:checkbox[name=type]:checked").each(function() {
    yourArray.push($('label[for=checkbox3]').text());
  });

  alert(yourArray);

  localStorage.setItem('jobs-selected', text);
  var job = localStorage.getItem("jobs-selected");

}

我的目标是：

yourArray=[选项1、选项2、选项4、选项8]

取决于用户的随机选择

---

我希望我解释得足够好，足以说明我要做的事情

由于每个复选框都在其标签内，并且您似乎正在使用jQuery，因此可以使用查找DOM中每个复选框上方最近的

：

yourArray = $('input:checkbox[name=type]:checked')
  .closest('label')
  .get()
  .map(label => label.textContent);

同等香草JS：

yourArray = Array.from(document.querySelectorAll('input[name=type]:checked'))
  .map(check => check.closest('label').textContent)

---

由于每个复选框都位于其标签内，并且您似乎正在使用jQuery，因此可以使用查找DOM中每个复选框上方最近的

：

yourArray = $('input:checkbox[name=type]:checked')
  .closest('label')
  .get()
  .map(label => label.textContent);

同等香草JS：

yourArray = Array.from(document.querySelectorAll('input[name=type]:checked'))
  .map(check => check.closest('label').textContent)

---

我认为最简单的方法就是找到表单和表单中的所有输入，这样你就拥有了表单的所有值，然后你可以对数据做任何你想做的事情

您可能还应该使用值，而不是文本。该值不应仅为真。基本上，在收音机和复选框中，您会检查是否选中该复选框，然后使用该值作为值

HTML

---

我认为最简单的方法就是找到表单和表单中的所有输入。这样，您将拥有表单的所有值，然后您可以对数据执行任何操作

您可能还应该使用值，而不是文本。该值不应仅为真。基本上，在收音机和复选框中，您会检查是否选中该复选框，然后使用该值作为值

HTML

---

每个复选框都保证在其关联标签内吗？@auxtaco是的，没错。每个复选框都保证在其关联标签内吗？@auxtaco是的，没错。感谢Enjayy的帮助。我尝试了这个解决方案，但得到了以下错误：client info.js:6 Uncaught TypeError:htmldevelment.onclick（test2.html:153）@mur7ay上无法读取jobType（client info.js:6）处null的属性'queryselectoral'，这似乎有点奇怪，您是否在html中向表单添加了id？我还编辑了一个链接到jsbin的帖子，这样你可以在actionAh中看到它，这就是我错过的。我在表单中没有id。我只是好奇，你不必回答，但是这个选项如何比上面AuxTaco提供的更好？@mur7ay我认为唯一能让它稍微好一点的是使用每个复选框选项的值，而不是依赖文本内容。此外，此解决方案允许您获取指定表单内部的所有输入，并且不依赖于围绕输入的标签。理想情况下，如果您决定编辑html的结构，这将减少未来可能发生的大量重构工作。这只依赖于ID为“input form”的标记内部的输入，就像他问的“每个复选框是否保证位于其相关标签内？”如果不感谢Enjayy的帮助，此解决方案将有效。我尝试了这个解决方案，但得到了以下错误：client info.js:6 Uncaught TypeError:htmldevelment.onclick（test2.html:153）@mur7ay上无法读取jobType（client info.js:6）处null的属性'queryselectoral'，这似乎有点奇怪，您是否在html中向表单添加了id？我还编辑了一个链接到jsbin的帖子，这样你可以在actionAh中看到它，这就是我错过的。我在表单中没有id。我只是好奇，你不必回答，但是这个选项如何比上面AuxTaco提供的更好？@mur7ay我认为唯一能让它稍微好一点的是使用每个复选框选项的值，而不是依赖文本内容。此外，此解决方案允许您获取指定表单内部的所有输入，并且不依赖于围绕输入的标签。理想情况下，如果您决定编辑html的结构，这可能会减少将来可能发生的大量重构工作。这只依赖于ID为“input form”的标记内部的输入，就像他问的“每个复选框是否保证位于其关联标签内”如果没有，此解决方案将有效