一組複選框值爲隱藏文本

我有以下一組複選框，並且如果選中一個框，我想將複選框的值複製到隱藏文本字段。因此，如果選中第一個，第三個和第七個框，則隱藏文本字段的值將爲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的願望之一。 –

是的，它只會提醒所選的複選框。請注意，您仍然需要創建輸入字段並將結果值添加到您的字段。讓我知道你是否需要幫助。 –

一組複選框值爲隱藏文本

回答

相關問題