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

Question

我一整天都在试图找出一个好的解决方案，并相信我已经接近了，但我无法找出最终的解决方案。我想做的是将复选框的选定(仅选定)文本值保存到数组中，以便我最终可以将其保存到数据库中。现在，如果我执行以下操作，我就可以做到这一点:

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>

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

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

您可能还应该使用值而不是文本。该值不应该只是真实的。基本上，在单选按钮和复选框上，您检查它是否已选中，然后使用该值作为值。

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