Jquery 单击元素时如何添加/删除输入值

我有以下html元素：

<input type="text" name="myassetid"><img src=".." data-assetid="152"><img src=".." data-assetid="153"><img src=".." data-assetid="164">

---

如何对删除部分进行编码？谢谢。

这里有一种方法：只需重新选择所有选定的图像，并在每次出现单击事件时重建列表

var
$images = $('img'),
$input = $('input[name="myassetid"]');

$images.on('click', function () {
     var assetIds = [];

     $(this).toggleClass("img-select");

     $images.filter('.img-select').each(function () {
          assetIds.push($(this).data('assetid'));
     });

     $input.val(assetIds.join(', '));
});

试一试

试试这个：-

这种方法不会清除值并重新创建它们。它只是过滤掉值

如有任何参考，请参阅

$('img').click(function() {
 var assetid = $(this).data('assetid');
  $(this).toggleClass("img-select");
    $this = $(this);
  $('input[name="myassetid"]').val(function(i,val) { 
      if($this.hasClass('img-select')){
          //append the value
          return val + (!val ? '' : ',') + assetid;
      }
      else
      {
          //remove the value
          return val.split(',').filter(function(ob){return parseInt(ob,10)!==assetid}).join(',');
      }
  });
});

---

添加/删除时享受排序结果 使用下划线库的非常简单和最佳的方法：

 $('body').delegate('img[data-assetid]','click',function(){
     var target=$('input[name=myassetid]')
     var tarw=_.words(target.val(), ",");
     var app=$(this).attr('data-assetid');
    (tarw.indexOf(app)!==-1)?(tarw= _.without(tarw,app)):(tarw.push(app))
     target.val(_.sortBy(tarw,function (n) {return n}).join(','));
})

---

演示：它没有达到预期效果。请重新阅读：当用户单击时，它将附加assetid值以输入myassetid。当用户再次单击同一元素时，assetid值应从输入值中删除（切换）。完全正确！如果以前未选择，则追加，但不删除其他选择的值，以便可以选择多个值，而不是唯一的值。我选择此答案是因为它简单。谢谢你，彼得。

$('img').click(function() {
 var assetid = $(this).data('assetid');
  $(this).toggleClass("img-select");
    $this = $(this);
  $('input[name="myassetid"]').val(function(i,val) { 
      if($this.hasClass('img-select')){
          //append the value
          return val + (!val ? '' : ',') + assetid;
      }
      else
      {
          //remove the value
          return val.split(',').filter(function(ob){return parseInt(ob,10)!==assetid}).join(',');
      }
  });
});

 $('body').delegate('img[data-assetid]','click',function(){
     var target=$('input[name=myassetid]')
     var tarw=_.words(target.val(), ",");
     var app=$(this).attr('data-assetid');
    (tarw.indexOf(app)!==-1)?(tarw= _.without(tarw,app)):(tarw.push(app))
     target.val(_.sortBy(tarw,function (n) {return n}).join(','));
})