Javascript 获取隐藏输入中带有逗号分隔字符串的输入按钮的值

我有5个带值的输入按钮

<input class="btn btn-default baths" name="baths"  type="button" value="1">
<input class="btn btn-default baths" name="baths"  type="button" value="2">
<input class="btn btn-default baths" name="baths"  type="button" value="3">
<input class="btn btn-default baths" name="baths"  type="button" value="4">
<input class="btn btn-default baths" name="baths"  type="button" value="5+">

我想要隐藏的领域是什么样的

<input class="all_baths" type="hidden" value="1,3,4">

var-baths=[]
$（'input.baths'）。单击（函数（）{
//$（“.btn.bats”）。每个（函数（）{
baths.push（$（this.val（））
//})
$（“所有浴室”）.val（浴室）
})

纯JS解决方案：

注意：我已从输入中删除了

隐藏的

类型，以使结果可见

var elems=document.getElementsByName（'baths'），
hidden=document.getElementById（'hidden'），
值=[]；
Array.from（elems）.forEach（v=>v.addEventListener（'click'，function（））{
values.indexOf（this.value）=-1？values.push（this.value）：values.splice（values.indexOf（this.value），1）；
hidden.value=values.sort（（a，b）=>a.match（/\d+/）-b.match（/\d+/）；
}));
试试你想要的


var-baths=[]；
$（'input[name=“baths”]”）。单击（函数（）{
调试器；
$（'input[name=“baths”]”）。每个（函数（）{
$value=$（this.val（）；
baths.push（$（this.val（））
});
if（$（'input.all_baths'）.val（））{
$（'input.all_BATS'）.val（“”）；
浴室=[]；
}
否则{
$（'input.all_baths'）.val（baths.join（'，'）；
}
});
输入是否具有
按钮类型？使用类型
checkbox
可以非常轻松地完成此操作


$（'.baths'）.on（'change'，function（））{
var VAL=[]；
$（'.baths:checked'）。每个（函数（）{//也可以在此处使用.map
vals.push（$（this.val（））；
});
$（'.all_bats'）.val（vals.join（'，'）；
console.log（$（'.all_bats'）.val（））；
});
我想这个代码对你有用。当您单击按钮时，该值将添加到
隐藏
字段，当您再次单击该按钮时，该值将从
隐藏
字段中删除，正如您所说的那样

<input class="btn btn-default baths" name="baths"  type="button" value="1">
<input class="btn btn-default baths" name="baths"  type="button" value="2">
<input class="btn btn-default baths" name="baths"  type="button" value="3">
<input class="btn btn-default baths" name="baths"  type="button" value="4">
<input class="btn btn-default baths" name="baths"  type="button" value="5+">

<input class="all_baths" type="hidden" value="">


您可以查看注释来理解代码。我希望它能帮助您。
您想将单击元素的值放在隐藏的输入元素上吗？@Ayush是的，先生。感谢大家的帮助。我尝试了您的答案，但同样的问题，我只需单击任何我不想要的按钮，就可以获得隐藏输入中的所有值。我只想要被点击的按钮值。不要在数组中添加值，我误解了你的意思question@ankitsuthar检查againI不喜欢这种方法，因为你正在创建一个数组。不，先生，这不是我要找的。我在找这样的。先生，您建议的解决方案是完美的，但当我把它放在我的代码中时，它就不起作用了。你能帮我解决这个问题吗？我将代码放在脚本和其他脚本之间@友善的user@ankitsuthar你用的是什么浏览器？@ankitsuthar应该可以用了。尝试将脚本从
主体
标记的底部移动到
头部
标记的底部，或者将脚本从
主体
标记的底部移动到
头部
标记的底部，然后检查脚本是否有效。我现在就去工作，如果你还有问题，我会在工作中帮助你。我会联系你的，先生，我拿到绳子了。非常感谢您，先生
<input class="all_baths" type="hidden" value="1,3,4">

<input class="btn btn-default baths" name="baths"  type="button" value="1">
<input class="btn btn-default baths" name="baths"  type="button" value="2">
<input class="btn btn-default baths" name="baths"  type="button" value="3">
<input class="btn btn-default baths" name="baths"  type="button" value="4">
<input class="btn btn-default baths" name="baths"  type="button" value="5+">

<input class="all_baths" type="hidden" value="">

$(document).ready(function() {
    $('.baths').on('click', function () {
          var current = $(this).val();
          var prev = $('.all_baths').val();
          console.log("current "+current+ " prev="+prev);

          if (prev === "") {
                $('.all_baths').val(current); //If hidden field is empty then add first value
          } else {
            var current = $(this).val();
            var arr = prev.toString().split(',');
            if ($.inArray(current, arr) != -1) {
              arr.splice(arr.indexOf(current),1); //If value already present then remove it
            } else {
              arr.push(current); // If value not present already then add it
            }
            console.log("array "+arr);
            $('.all_baths').val(arr.join(",").toString()); // Add the final array to hidden field
          }

      });

});