使用Jquery获取值的复选框

我有多个复选框。用户可以选择一个或多个。所以，我必须得到这些复选框的值

 <div class="filters col-md-12">
                        <div class="form-group">
                            @foreach($destination as $dest)
                            <label class="radio-inline" id="desti">{{$dest->destination}}
                                <input  type="checkbox" name="dest_val" value="{{$dest->id}}">
                                <span class="checkmark"></span>
                            </label>
                            @endforeach
                        </div>
                    </div>

但是，它没有给我正确的值。当我点击第一个复选框时，它给出值=1，这是正确的；当我点击2时，它给出2，这是正确的。所以，当1被选中，然后我选中2，我得到两个1加在前面的1上，这使得1（3）/1乘以3，我也得到1 2。所以，我想要的是，当我检查2时，我只得到2，不再是

---

这种事情也在发生，反之亦然。有人能帮忙吗？

在DOM元素上重用

id

属性时，会得到这样奇怪的结果。尝试为每个复选框使用唯一的id，或者使用类名

您还需要为复选框指定一个唯一的名称

下面是使用类名的示例：

HTML

<div class="filters col-md-12">
    <div class="form-group">
        @foreach($destination as $dest)
            <label class="radio-inline checkbox-label">{{$dest->destination}}
                <input type="checkbox" value="{{$dest->id}}">
                <span class="checkmark"></span>
            </label>
       @endforeach
    </div>
</div>

<div class="filters col-md-12">
    <div class="form-group">
        @foreach($destination as $dest)
            <label class="radio-inline checkbox-label">{{$dest->destination}}
                <input type="checkbox" value="{{$dest->id}}">
                <span class="checkmark"></span>
            </label>
       @endforeach
    </div>
</div>

$(document).on('click','.checkbox-label',function () {
    var destination = $(this).find('input[type="checkbox"]').val();
    console.log(destination);
});