Question

我一直试图找出一个好的解决方案，并且相信我已经接近了，但我无法找到最终的解决方案。我要做的是将复选框的选定文本值（仅选中）保存到数组中，以便最终将其保存到数据库中。现在，如果我执行以下操作，我就能够做到这一点：

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

但是，我想避免使用特定的＆＃39; for = checkbox3＆＃39;并自动获取所选复选框的文本值。一旦我正常工作，我就会将阵列内容保存到本地存储中。任何帮助表示赞赏。

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>

Javascript：

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 = [Option #1, Option #2, Option#4, Option #8]取决于用户的随机选择。

我希望我能够很好地解释我试图做的事情。

Answer 1

由于每个复选框都在其标签内，并且您似乎正在使用jQuery，因此您可以使用$.closest在DOM中的每个复选框上方找到最接近的<label>：

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)

Answer 2

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

您应该也可以使用值而不是文本。价值不应该是真实的。基本上在无线电和复选框上，您检查它是否已被选中，然后使用该值的值。

HTML

<form id="input-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="Option #2" checked="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="Option #1" />
           Option #2
        </label>
     </div> 
  </form>

的Javascript

var form = document.getElementById('input-form');

var myArray = [];
form.querySelectorAll('input').forEach(function (input) {
  if(input.type === 'checkbox' && input.checked) {
    myArray.push(input.value);
  }
})

console.log(myArray)

http://jsbin.com/peficoseva/2/edit?html,js,console,output

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

2 个答案: