Jquery动态创建复选框，并查找复选框

Question

我有来自数据库的信息，这些信息被放入一个列表中，每个元素都有一个复选框。这就是目前的做法：

function subjects(){
$.ajax({
url: "lib/search/search.subject.php",
async: "false",
success: function(response){
alert(response);
var responseArray = response.split(',');    
for(var x=0;x<responseArray.length;x++){
$("#subjects").append("<br />");
$("#subjects").append(responseArray[x]);
$("#subjects").append("<input type='checkbox' />");
}           
}
});
}

它工作得很好，但我需要一种方法来判断是否单击了一个复选框，如果单击了复选框，则显示单击了哪个复选框，或者是否单击了多个复选框。

我似乎根本找不到一种方法来提取支票。

响应变量是"数学、科学、技术、工程">

Answer 1

因为要动态填充复选框，所以需要委派事件

$("#subjects").on("click", "input[type='checkbox']", function() {
if( $(this).is(":checked") ) {
alert('Checkbox checked')
}
});

为了更好地捕获数据，最好将相应的数据封装到一个跨度中，这样更容易搜索。。

$("#subjects").append('<span>'+responseArray[x] + '</span>');

---

$("#subjects").on("click", "input[type='checkbox']", function() {
var $this = $(this);
if( $this.is(":checked") ) {
var data = $this.prev('span').html();
alert('Current checkbox is : '+ data ) 
}
});

Answer 2

最好给动态注入的复选框一个类，以便更好地针对它们，但根据您的代码尝试：

$("#subjects").on("click", "input", function() {
if( $(this).is(":checked") ) {
// do something
}
});

由于输入元素是动态添加的，因此需要使用jQuery的.on()函数将单击事件绑定到它们。在您的情况下，需要在加载脚本时使用.on()绑定到DOM中存在的元素。在您的案例中，ID为#subjects的元素。

文档中的这条注释主要是给machineghost的，他无缘无故地否决了我的答案：

事件处理程序仅绑定到当前选定的元素；他们必须在代码调用.on()时存在于页面上。为确保元素存在并且可以选择，请执行事件中元素的文档就绪处理程序内部的绑定页面上的HTML标记。如果新的HTML正在被注入到页面中，选择元素并在生成新HTML后附加事件处理程序放置到页面中。

Answer 3

$('#subjects input[type=checkbox]').on('click',function(){
alert($(this).prop('checked'));
});

或更改事件：如果有人使用键盘

$('#subjects input[type=checkbox]').on('change',function(){
alert($(this).prop('checked'));
});

简单的小提琴示例：http://jsfiddle.net/Dr8k8/

要获得数组示例，请使用输入的索引

alert($(this).prop('checked') +'is'+ $(this).parent().find('input[type=checkbox]').index(this)+ responseArray[$(this).parent().find('input[type=checkbox]').index(this) ]);

简化示例：http://jsfiddle.net/Dr8k8/1/

编辑：举个例子，你可以把结果放在一个所有复选框的数组中，然后用它做一些事情：

$('#subjects>input[type=checkbox]').on('change', function() {
var checklist = [];
$(this).parent().find('input[type=checkbox]').each(function() {
$(this).css('background-color', "lime");
var myindex = $(this).parent().find('input[type=checkbox]').index(this);
if ($(this).prop('checked') == true) {
checklist[myindex] = responseArray[myindex];
}
});
$('#currentlyChecked').text(checklist);
});

第2版：

我想了一下，你可以通过使用.data()来改进它，并根据事件查询或存储它(我的按钮由其id"whatschecked"调用)

var responseArray = ['math', 'science', 'technology', 'engineering'];// just for an example
var myList = '#subjects>input[type=checkbox]';//to reuse
for (var x = 0; x < responseArray.length; x++) {
// here we insert it all so we do not hit the DOM so many times
var iam = "<br />" + responseArray[x] + "<input type='checkbox' />";
$("#subjects").append(iam);
$(myList).last().data('subject', responseArray[x]);// add the data
}
var checklist = [];// holds most recent list set by change event
$(myList).on('change', function() {
checklist = [];
$(myList).each(function() {
var myindex = $(this).parent().find('input[type=checkbox]').index(this);
if ($(this).prop('checked') == true) {
checklist.push($(this).data('subject'));
alert('This one is checked:' + $(this).data('subject'));
}
});
});
// query the list we stored, but could query the checked list data() as well, see the .each() in the event handler for that example
$("#whatschecked").click(function() {
var numberChecked = checklist.length;
var x = 0;
for (x = 0; x < numberChecked; x++) {
alert("Number " + x + " is " + checklist[x] + " of " + numberChecked);
}
});

最后一个实例：http://jsfiddle.net/Dr8k8/5/

Answer 4

单击复选框输入时执行操作的一般模式是：

$('input[type=checkbox]').click(function() {
// Do something
})

检查复选框输入是否被选中的一般模式是：

var isItChecked = $('input[type=checkbox]').is(':checked');

在你的特殊情况下，你可能想做一些类似的事情：

$('#subjects input[type=checkbox]').click(function() {

以将所涉及的复选框限制为#subjects元素内的复选框。