一组复选框值为隐藏文本

我有以下一组复选框，并且如果选中一个框，我想将复选框的值复制到隐藏文本字段。因此，如果选中第一个，第三个和第七个框，则隐藏文本字段的值将为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()); 
});

我该怎么办呢？

更新：而当一个复选框未选中时，值应该被删除。

来源

2014-05-23 Martijn Thomas

我猜你可能已经尝试过的东西，你想与大家分享和我们？ –

我做过了，我在开篇文章中应用了这个解决方案，这里是一个[JSFiddle]（http://jsfiddle.net/e6jpG/117/） –

请把你的代码从小提琴发布到这里，这样它就可以保存下来供将来使用到SO的访客。 –

有了这个简单的代码，你可以做到这一点：

//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

来源

2014-05-23 17:56:57

您需要添加一个隐藏字段，并在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的，让你能感受到的正确性。

来源

2014-05-23 17:47:22

@WilfredoP你是初学者还是专业？当用户取消选中复选框时它也可以工作。 –

@RashminJaviya请不要粗鲁。 –

@WilfredoP他重置数组，并在每次发生更改时遍历所有复选框。所以他正在擦拭石板，并在每次更换时重新开始。 –

-1

我为你做了这个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); 
});

来源

2014-05-23 17:51:25

但是，如果未选中，它会删除该值吗？这是OP的愿望之一。 –

是的，它只会提醒所选的复选框。请注意，您仍然需要创建输入字段并将结果值添加到您的字段。让我知道你是否需要帮助。 –

一组复选框值为隐藏文本

回答

相关问题