如何在隱藏的輸入上添加多值

Question

我有一個示例代碼：

<input type="hidden" value="" name="stall_id">
<a href='javascript:;' onclick='check(this)' data-id='1'>Add</a>
<a href='javascript:;' onclick='check(this)' data-id='2'>Add</a>
<a href='javascript:;' onclick='check(this)' data-id='3'>Add</a>

我的jQuery：

function check(tr) {
    var id = $(this).data("id");
    $(tr).attr("onclick", "uncheck(this)");
    $(tr).html('Add');
}
function uncheck(tr) {
    var id = $(this).data("id");
    $(tr).attr("onclick", "check(this)");
    $(tr).html('Remove');
}

如何在選中/取消選中時將隱藏的值自動添加？

例如： <input type="hidden" value="1,3" name="stall_id">如果我檢查了兩個值。

Answer 1

你並不需要改變的onclick屬性a試試這個代碼將工作的優良只使用單一的功能： -

function check(tr) {
var id = $(tr).data("id");
var hdn = $('[name="stall_id"]'), val;
var text = $(tr).html();  
if (text == 'Add') {
     val = hdn.val() == '' ? id : hdn.val() + ',' + id;
 } else {
    val = hdn.val().split(',').filter(function (d) {
        return d != id;
    }).join(',');
 }   
 $(tr).html(text == 'Add' ? 'Remove' : 'Add');
   hdn.val(val);
   alert(hdn.val());
 }   

演示版

Answer 2

隱藏的輸入類型只能有一個文字值。 如果使用逗號分隔的字符串，則可以對其進行詳細說明並將其轉換為數組。 或者，您可以使用表單輸入數組。 您可以在此處找到更多信息。 基本上，您需要為每個值創建一個隱藏（動態）的輸入，並將名稱設置為“ stall_id []”

Answer 3

這應該工作：

 function toggle(tr) { if ($(tr).hasClass("checked")) { $(tr).removeClass("checked").html("Add"); } else { $(tr).addClass("checked").html("Remove"); } var selected = []; $("a.checked").each(function() { selected.push($(this).data("id")); }); $("input[name=stall_id]").val(selected.join(',')); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" value="" name="stall_id"> <a href='javascript:;' onclick='toggle(this)' data-id='1'>Add</a> <a href='javascript:;' onclick='toggle(this)' data-id='2'>Add</a> <a href='javascript:;' onclick='toggle(this)' data-id='3'>Add</a> 

我們將一個“ checked”類附加到checked元素，以便我們可以使用jQuery的類選擇器簡單地選擇所有checked元素。