配列にチェックボックスのテキスト値を保存する

Question

私は終日良い解決策を見つけようと努力してきましたが、近づいていると信じていますが、私は最終的な解決策を見つけられません。私がやろうとしているのは、チェックボックスの選択されたテキスト値を配列に保存して、最終的にデータベースに保存することです。

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

は、しかし、私はちょうど、自動的にそれらの選択したチェックボックスのテキスト値を取得「= 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

Answer 2

各チェックボックスは、そのラベル内にある、あなたはjQueryのを使用しているように見えるとして、あなたはDOM内の各チェックボックス上記最も近い<label>を見つけるために$.closestを使用することができます。

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)