Question

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

HTML代码段：

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

jQuery Snippet：

$(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()

追加：

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

Answer 1

如果要动态添加此HTML，则应使用.on（）方法，如：

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

尝试一下，让我知道它是否有帮助。

Answer 2

试试这个

$("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);

<强>编辑：

$("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 ");
    }
});

已编辑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

Answer 3

使用此ID选择器change尝试'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 $10.00</label>
<label for="checkbox[2]">
  <input type="checkbox" name="checkbox[2]" id="checkbox[2]" class="detectThisChange" value="20.00" checked="">Amount $20.00</label>
<label for="checkbox[3]">
  <input type="checkbox" name="checkbox[3]" id="checkbox[3]" class="detectThisChange" value="30.00" checked="">Amount $30.00</label>

Answer 4

试试这个：

$(".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');
    }
});

这里有 JSFiddle ，即使您有答案：）

Answer 5

尝试：）

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

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

5 个答案: