체크 된 체크 박스에서 모든 값 가져 오기 및 텍스트 영역에 넣기

Question

자바 스크립트로 모든 체크 박스 값을 텍스트 영역에 넣고 한 번 선택 해제하면 배열에서 팝업됩니다. 여기 코드는

입니다.

<form enctype="multipart/form-data" method="get" id="frmMain" name="frmMain"> 
    <input type = "checkbox" id = "chk1" value = "CheckBox1" onclick ='checkTickArea(this.id)'> 
    <input type = "checkbox" id = "chk2" value = "CheckBox2" onclick = 'checkTickArea(this.id)'> 
    <input type = "checkbox" id = "chk3" value = "CheckBox3" onclick = 'checkTickArea(this.id)'> 
    <input type = "checkbox" id = "chk4" value = "CheckBox4" onclick = 'checkTickArea(this.id)'> 
    <input type = "checkbox" id = "chk5" value = "CheckBox5" onclick = 'checkTickArea(this.id)'> 
    <textarea id= "taSignOff" style="width:180px;height:90px;font-size:20px; resize: none;" rows="3" readonly> </textarea> 
</form> 

자바 스크립트 : 또한이 기능은 파이어 폭스에서 작동 ...하지만 크롬과 IE에서 작동하지 않습니다

var selectedvalue=[]; 
function checkTickArea(id) 
    { 

     $('#'+id).change(function() { 
      //If checked then push the value 
      if($('#'+id).is(":checked")) 
      { 
       selectedvalue.push($('#'+id).attr("value")); 
      }else 
      { 
       //This is what pops the value from the array when the checkbox is unchecked. 
      /* var index = selectedvalue.indexOf($('#'+id).attr("value")); 
       if (index > -1) { 
        selectedvalue.splice(index, 1); 
       }*/ 
       selectedvalue.splice(selectedvalue.indexOf($(this).attr("value")),1); 
      } 
      document.getElementById('taSignOff').value = selectedvalue.join("->\n"); 
     }); 
    } 

... 이것은 나를 위해 작동

Answer 1

, 비록 너 왜하지 않는지 모르겠다. 텍스트 영역에 대한 자체 jQuery를 : jsFiddle

HTML :

<form enctype="multipart/form-data" method="get" id="frmMain" name="frmMain"> 
    <input type = "checkbox" id = "chk1" value = "CheckBox1" /> 
    <input type = "checkbox" id = "chk2" value = "CheckBox2" /> 
    <input type = "checkbox" id = "chk3" value = "CheckBox3" /> 
    <input type = "checkbox" id = "chk4" value = "CheckBox4" /> 
    <input type = "checkbox" id = "chk5" value = "CheckBox5" /> 
    <textarea id= "taSignOff" style="width:180px;height:90px;font-size:20px; resize: none;" rows="3" readonly> </textarea> 
</form> 

자바 스크립트 :

var selectedvalue = []; 

$('input[type="checkbox"]').on('change', checkTickArea); 

function checkTickArea() { 

    //If checked then push the value 
    if ($(this).is(":checked")) { 
     selectedvalue.push($(this).val()); 
    } else { 
     selectedvalue.splice(selectedvalue.indexOf($(this).val()), 1); 
    } 

    // Why not use jQuery tho? 
    //$('taSignOff').val(selectedvalue.join("->\n")); 
    document.getElementById('taSignOff').value = selectedvalue.join("->\n"); 
} 

Answer 2

인라인을 제거 자바 스크립트 및 수행

var elems = $('[id^="chk"]'); 

elems.on('change', function() { 
    $('#taSignOff').val(
     elems.filter(':checked').map(function() { 
      return this.value; 
     }).get().join("->\n") 
    ); 
}); 

FIDDLE

을