如何使用jquery检测复选框是否被点击

How to detect if a checkbox has been clicked with jquery

本文关键字：是否 复选框 何使用 jquery 检测      更新时间：2023-09-26

我有许多复选框，我想将其值添加到会话变量中的数组中。问题是我不知道复选框的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 };
        }
      }
    });

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

我认为您没有将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() .

或

你根本没有把jQuery链接到你的文档。

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

这将包括您的文档的jQuery

这里看起来很好:

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

是演示

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

返回id for复选框

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

。

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

我个人对复选框使用click事件。他们似乎比改变更有效。

还可以使用this访问当前单击/更改的复选框的id或value属性。价值和这个。

$("input:checked")将返回当前选中的所有复选框和单选框。你可以遍历它然后把值添加到数组中

相关文章：