隐藏文本的复选框值组

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的文档就绪事件中使用如下代码。

Javascript

$(".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/

我还把勾选的ID附加到textarea，让你感受一下正确性。

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); 
});