如何检测jquery是否已单击复选框

Question

我有很多复选框，希望将其值添加到会话变量的数组中。 问题是我不知道复选框的ID是什么。 复选框将如下所示：

<input type="checkbox" value="102" name="tags[]" id="tag102" class="checkbox" />
<input type="checkbox" value="103" name="tags[]" id="tag103" class="checkbox" />
<input type="checkbox" value="104" name="tags[]" id="tag104" class="checkbox" />
<input type="checkbox" value="105" name="tags[]" id="tag105" class="checkbox" />

第一步是我要尝试检测一下是否单击了它们，但是我什么也没得到，也没有错误，也没有在控制台中输入任何内容。

$('input[type=checkbox]').change(function() {
    console.log("box was clicked");
    alert("box clicked...");
});

我究竟做错了什么。

该脚本已加载到文档就绪功能中。 在此之前，将加载最新的jquery＆bootstrap3。

更新

看起来有些东西干扰了该复选框：

// type ahead search
    var allclients_ajaxUrl = '[[~41]]';

    $('#searchusers').select2({  
      minimumInputLength: 2,
      ajax: {
        url: allclients_ajaxUrl,
        dataType: 'json',
        data: function (term, page) {
          return {
            q2: term
          };
        },
        results: function (data, page) {
          return { results: data };
        }
      }
    });

不知道如何或为什么会弄乱选择框。

Answer 1

我认为您没有将jQuery代码包装在文档就绪函数内。 尝试这个

$(document).ready(function () {
   $('input[type=checkbox]').change(function() {
      console.log($(this).attr('id') + "box was clicked");
      alert($(this).attr('id') + " box clicked...");
   });
});

使用this关键字将仅向您提供触发事件的元素。 因此，您不必担心文档中复选框的阵列。

其次，您也可以在复选框上触发click事件。 如果要检测单击功能。 .click() 。

...要么

您根本没有将jQuery链接到您的文档。

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

这将包括文档的jQuery。

Answer 2

在这里看起来不错：

$(document).ready(function(){
    $('input[type=checkbox]').change(function() {
        console.log("box was clicked "+$(this).attr('id'));    
    });    
});

http://jsfiddle.net/Gz3Zb/

Answer 3

这是一个演示

$('input[type=checkbox] ').change(function() {
  if ($(this).is(':checked')) {
    alert("checked for : " + this.id);
  }
});

这将返回已选中复选框的id 。

Answer 4

使用选中的选择器http://api.jquery.com/checked-selector/

例如

$('input[type=checkbox]').click(function() {
    if ($(this).is(':checked')) {
        // do something when checked
    } else {
        // do something when unchecked
    }
});

我个人将点击事件用于复选框。 他们似乎比改变更好。

此外，您可以使用this.value和this.id（在函数“ this”中引用DOM元素）访问当前单击/更改的复选框的id或value属性。

Answer 5

$（“ input：checked”）将返回当前选中的所有复选框和单选框。 您可以对其进行迭代，然后将值添加到数组中。