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

如何选中/取消选中，值会自动添加输入隐藏吗？

Ex：<input type="hidden" value="1,3" name="stall_id">如果我检查了两个值。

Answer 1

您不需要更改a的onclick属性尝试此代码可以正常使用，只使用单一功能： -

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

Demo

Answer 2

隐藏的输入类型只能有一个文字值。如果使用逗号分隔的字符串，则可以对其进行详细说明并将其转换为数组。或者，您可以使用表单输入数组。您可以找到更多信息here。基本上，您需要为每个值隐藏（动态）创建输入，并将名称设置为＆＃34; stall_id []＆＃34;

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的类选择器简单地选择所有选中的元素。

如何在隐藏的输入上添加多值

3 个答案: