Question

我在数组中有三个复选框。我处理用户的每次点击并将复选框的值添加到数组中。例如，页面已加载，用户已单击a1，则值包含a1。如果用户单击a1和a3，则值包含a1，a3等...

如果我点击复选框方块，它可以正常工作，但如果我点击复选框的文本，js会提醒两个版本的数组 - 之前（我不需要这个！）和实际。有人可以帮忙吗？

标记

<label class="checkbox-button"><input autocomplete="off" name="tag[]" value="a1" type="checkbox">a1 text</label>
<label class="checkbox-button"><input autocomplete="off" name="tag[]" value="a2" type="checkbox">a2 text</label>
<label class="checkbox-button"><input autocomplete="off" name="tag[]" value="a3" type="checkbox">a3 text</label>

JS

$(".checkbox-button").bind("click", function (event) {
   var values = $("input[name='tag[]']:checked").map(function () {
       return this.value;
   }).get();
   alert(values);
});

Answer 1

你在这里：

   $(".checkbox-button input").bind("click", function(event) {
       var values = $("input[name='tag[]']:checked").map(function() {
           return this.value;
       }).get();
       alert(values)
   })

你的问题是你选择了错误的元素。您应该选择input而不是标签更新后的版本位于：https://jsfiddle.net/94bdepx0/1/

Answer 2

您的点击事件已绑定到标签。如果将其绑定到复选框，则双重警报就会消失。

$("input[type=checkbox]").bind("click", function(event) {

   var values = $("input[name='tag[]']:checked").map(function () {
            return this.value; }).get(); 
   alert(values)
})

Answer 3

不要在父元素上侦听“点击”，而是在输入上监听“更改”。

$(".checkbox-button").bind("click", function(event) {
...
});

变为：

$(".checkbox-button input").bind("change", function(event) {
...
});

onclick后的Javascript双重警报

标记

JS

3 个答案: