如何检测是否已使用jquery单击了一个复选框

时间:2014-07-22 20:43:06

标签: javascript jquery

我有很多复选框,我想在会话变量中添加数组的值。问题是我不知道复选框的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&amp; 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 };
        }
      }
    });

不确定如何或为何会弄乱选择框。

5 个答案:

答案 0 :(得分:2)

我认为你没有将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。

答案 1 :(得分:1)

这里似乎很好:

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

http://jsfiddle.net/Gz3Zb/

答案 2 :(得分:1)

这是 DEMO

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

这会返回id以查看复选框。

答案 3 :(得分:1)

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

E.g。

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

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

此外,您可以使用this.value和this.id访问当前单击/更改的复选框的id或value属性(在函数内部&#34;此&#34;指的是DOM元素)。

答案 4 :(得分:0)

$(“input:checked”)将返回当前选中的所有复选框和单选框。您可以迭代它,只需将值添加到数组中。