숨겨진 텍스트에 대한 체크 박스 값 그룹

Question

다음 확인란 그룹이 있습니다. 확인란을 선택하면 숨겨진 텍스트 필드에 '복사 된'확인란의 값이 필요합니다. 따라서 첫 번째, 세 번째 및 일곱 번째 상자가 체크 된 경우 숨겨진 텍스트 필드의 값은 1,3,7

I found this solution이되지만 텍스트 필드에는 하나의 값만 추가됩니다.

<input id=myhidden value=""> 
<div class="btn-group"> 
    <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown"> 
     Tags <span class="caret"></span> 
    </button> 
    <ul class="dropdown-menu dropdown-menu-form" role="menu"> 
     <li><input class="checkbox" id="tagCheckbox" name="tags[]" type="checkbox" value="1"> Lokaal</li> 
     <li><input class="checkbox" id="tagCheckbox" name="tags[]" type="checkbox" value="2"> Nationaal</li> 
     <li><input class="checkbox" id="tagCheckbox" name="tags[]" type="checkbox" value="3"> Beide</li> 
     <li><input class="checkbox" id="tagCheckbox" name="tags[]" type="checkbox" value="4"> Onbekend</li> 
     <li><input class="checkbox" id="tagCheckbox" name="tags[]" type="checkbox" value="5"> Lokale partij</li> 
     <li><input class="checkbox" id="tagCheckbox" name="tags[]" type="checkbox" value="6"> CDA</li> 
     <li><input class="checkbox" id="tagCheckbox" name="tags[]" type="checkbox" value="7"> VVD</li> 
     <li><input class="checkbox" id="tagCheckbox" name="tags[]" type="checkbox" value="8"> D66</li> 
     <li><input class="checkbox" id="tagCheckbox" name="tags[]" type="checkbox" value="9"> PvdA</li> 
     <li><input class="checkbox" id="tagCheckbox" name="tags[]" type="checkbox" value="10"> SP</li> 
     <li><input class="checkbox" id="tagCheckbox" name="tags[]" type="checkbox" value="11"> GroenLinks</li> 
     <li><input class="checkbox" id="tagCheckbox" name="tags[]" type="checkbox" value="12"> ChristenUnie</li> 
     <li><input class="checkbox" id="tagCheckbox" name="tags[]" type="checkbox" value="13"> SGP</li> 
     <li><input class="checkbox" id="tagCheckbox" name="tags[]" type="checkbox" value="14"> PVV</li> 
     <li><input class="checkbox" id="tagCheckbox" name="tags[]" type="checkbox" value="15"> Partij voor de Dieren</li> 
     <li><input class="checkbox" id="tagCheckbox" name="tags[]" type="checkbox" value="16"> Overige landelijke partij</li> 
     <li><input class="checkbox" id="tagCheckbox" name="tags[]" type="checkbox" value="17"> Politieke actor</li> 
     <li><input class="checkbox" id="tagCheckbox" name="tags[]" type="checkbox" value="18"> Pers</li> 
     <li><input class="checkbox" id="tagCheckbox" name="tags[]" type="checkbox" value="19"> Kiezer</li> 
     <li><input class="checkbox" id="tagCheckbox" name="tags[]" type="checkbox" value="20"> tweet</li> 
     <li><input class="checkbox" id="tagCheckbox" name="tags[]" type="checkbox" value="21"> user</li> 
    </ul> 
</div> 

과 JS 나는

나는이 작업을 수행하려면 어떻게

$('input[type="checkbox"]').change(function(){ 
    $('#myhidden').val($(this).val()); 
}); 

를 시도?

업데이트 : 그리고 체크 박스가 선택 취소 된 경우 값을 제거해야합니다.

Answer 1

, 당신은 그것을 할 수 있습니다 :

//Bind change event 
$('.checkbox').on('change', function(){ 
    //Select every checked input and build an array 
    var values = $('.checkbox:checked').map(function(){ 
     //Return the value for the array 
     return this.value; 
    }).get(); 

    //Set the new val to you input 
    $('#hiddenValue').val(values.join(',')); 

    //See the result 
    console.log($('#hiddenValue').val()) 
}); 

Fiddle

Answer 2

숨겨진 필드 하나를 추가하고 jQuery의 문서 준비 이벤트에서 다음 코드를 사용해야합니다.

자바 스크립트

$(".checkbox").change(function(){ 

    var oChecked = new Array(); 

    $(".checkbox").each(function(index, val){ 
     if($(val).is(":checked")) 
     oChecked.push($(val).val()); 
    }); 

    $("#hdnData").val(oChecked.join()); 
}); 

HTML은

<input type="hidden" id="hdnData" /> 

는 현재 http://jsfiddle.net/iamrmin/V2B6g/

그것을 확인할 수 있습니다 I가 당신이 정확성을 느낄 수 있도록 또한 텍스트 영역에 확인 ID를 추가 .

Answer 3

나는 이것을 fiddle으로 만들었습니다. 확인란을 클릭 할 때마다 숨겨진 필드에 할당 할 수있는 결과가 알려줍니다. 여기에 코드입니다 :이 간단한 코드로

$('.checkbox').click(function() { 

var result = ""; 

$('.checkbox').each(function() { 


if (this.checked) { 
    if (result.length > 0) { 
    result+=","; 
} 
    result+=this.value; 
} 
}); 


alert("Assign value of your hidden field: " + result); 
});