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

Question

我有 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="">

算我一个 jquery 之类的初学者。

我已经尝试过这个 jquery 但没有得到正确的结果。单击隐藏字段中的所有按钮即可获取所有值。

$('input.baths').click(function () {
    $value = $('input.baths').map(function () {
        return $(this).val()
    }).get().join(',');

    $('input.all_baths').val($value);
});

我想要的隐藏字段是这样的

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

Answer 1

纯JS解决方案:

注意:我已从输入中删除了隐藏类型以使结果可见。

var elems = document.getElementsByName('baths'),
    hidden = document.getElementById('hidden'),
    values = [];
    
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+/));
}));

<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="" value="" id='hidden'>