[英]How to detect a checkbox click in jQuery
我无法检测何时以及从下面的脚本中点击了哪个复选框:
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代码段:
$(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()函数没有触发。
如果要以动态方式添加此HTML,则应使用.on()方法,如:
$(document).on('change', '.detectThisChange', function() {
// your code
});
尝试一下,让我知道它是否有帮助。
试试这样吧
$("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 ");
}
});
尝试将此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>
尝试这个 :
$(".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 ,即使你有答案:)
尝试:)
if ( $('#checkbox\\['+ i +'\\]').is(":checked") ) {
alert('checkbox ' + i + ' was checked');
}
else {
alert('checkbox ' + i + ' was unchecked');
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.