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

隐藏文本的复选框值组

3 个答案: