javascript 如何检测 jQuery 中的复选框单击

How to detect a checkbox click in jQuery

提问by H. Ferrence

I cannot detect when and which checkbox gets clicked from script below:

我无法检测何时以及从下面的脚本中单击了哪个复选框：

HTML Snippet:

HTML 片段：

<label for="checkbox[1]"><input type="checkbox" name="checkbox[1]" id="checkbox[1]" class="detectThisChange" value="10.00" checked=""> Amount .00</label>
<label for="checkbox[2]"><input type="checkbox" name="checkbox[2]" id="checkbox[2]" class="detectThisChange" value="20.00" checked=""> Amount .00</label>
<label for="checkbox[3]"><input type="checkbox" name="checkbox[3]" id="checkbox[3]" class="detectThisChange" value="30.00" checked=""> Amount .00</label>

jQuery Snippet:

jQuery 代码段：

$(document).ready(function() {
  $(window).load(function() {
// ... //
        $('.detectThisChange').change(function(event){
          var targetID = triggerEvent.target.id; // get the id that triggered the event
          var posStart = targetID.indexOf('[') + 1;
          var posEnd = targetID.indexOf(']');
          var i = targetID.substring(posStart, posEnd); // get the index of the id that triggered the event

          if ( $('#checkbox\['+ i +'\]').prop('checked') != true ) {
            alert('checkbox ' + i + ' was checked');
          }
          else {
            alert('checkbox ' + i + ' was unchecked');
          }

        });
// ... //
  }); // end .load()
}); // end .ready()

Appended:

附加：

The problem I am experiencing is that none of my alerts work. So that tells me the change() function is not firing.

我遇到的问题是我的警报都不起作用。所以这告诉我 change() 函数没有触发。

回答by Everton Lenger

If you are adding this HTML dinamically, you should use the .on() method, like:

如果您要动态添加此 HTML，则应使用 .on() 方法，例如：

$(document).on('change', '.detectThisChange', function() {
    // your code
});

Give it a try and let me know if it helps.

试一试，如果有帮助，请告诉我。

回答by Satinder singh

Try like this

像这样尝试

$("input[type=checkbox]").is(":checked") // returns boolean checked or unchecked

---

---

   var arr = [];
    $("input[type=checkbox]").each(function () {
        var self = $(this);
        if (self.is(':checked')) {
            arr.push(self.attr("id"));
        }
    });
    console.log(arr);

EdIted:

编辑：

$("input[type=checkbox]").on('change', function () {
    var self = $(this);
    if (self.is(":checked")) {
        console.log("checkbox  id =" + self.attr("id") + "is checked ");
    } else {
        console.log("Id = " + self.attr("id") + "is Unchecked ");
    }
});

Edited 2 :

编辑 2 ：

$("body").on('change','.detectThisChange', function () {
    var self = $(this);
    if (self.is(":checked")) {
        console.log("checkbox  id =" + self.attr("id") + "is checked ");
    } else {
        console.log("Id = " + self.attr("id") + "is Unchecked ");
    }
});

Working Demo

工作演示

Learn jQuery: Simple and easy jQuery tutorials blog

学习 jQuery：简单易用的 jQuery 教程博客

回答by H. Ferrence

Try on changeevent with this id selector as 'input[id^=checkbox]':

change使用此 id 选择器尝试事件'input[id^=checkbox]'：

$(function() {
  $('input[id^=checkbox]').on('change', function() {
    console.log(this.value, this.checked);
  }).trigger('change');//fire event on page load
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="checkbox[1]">
  <input type="checkbox" name="checkbox[1]" id="checkbox[1]" class="detectThisChange" value="10.00" checked="">Amount .00</label>
<label for="checkbox[2]">
  <input type="checkbox" name="checkbox[2]" id="checkbox[2]" class="detectThisChange" value="20.00" checked="">Amount .00</label>
<label for="checkbox[3]">
  <input type="checkbox" name="checkbox[3]" id="checkbox[3]" class="detectThisChange" value="30.00" checked="">Amount .00</label>

回答by Mark C.

Try this :

试试这个 ：

$(".detectThisChange").on('change', function () {

    alert("In the function");
    var targetID = this.id; // get the id that triggered the event
    var posStart = targetID.indexOf('[') + 1;
    var posEnd = targetID.indexOf(']');
    var i = targetID.substring(posStart, posEnd); // get the index of the id that triggered the event

    if ($('#checkbox\[' + i + '\]').prop('checked') == true) {
        alert('checkbox ' + i + ' was checked');
    } else {
        alert('checkbox ' + i + ' was unchecked');
    }
});

Here's the JSFiddle, even though you have an answer :)

这是JSFiddle，即使您有答案:)

回答by Bhojendra Rauniyar

Try:)

尝试：）

if ( $('#checkbox\['+ i +'\]').is(":checked") ) {
  alert('checkbox ' + i + ' was checked');
}
else {
  alert('checkbox ' + i + ' was unchecked');
}