배열에 체크 박스 텍스트 값 저장

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> 

자바 스크립트 :

: 현재의 체크 박스 형태의

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> 

자바 스크립트

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

각 체크 박스 라벨 안에 당신은 당신이 DOM의 각 체크 박스 위의 가장 가까운 <label> 찾을 $.closest을 사용할 수 있습니다, jQuery를 사용하는 것으로 나타납니다으로 :

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) 

을