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()函数将click事件绑定到它们。在您的情况下，您需要使用.on()绑定到加载脚本时DOM中存在的元素。在您的情况下，ID为#subjects的元素。

来自文档的这个说明主要是针对那些没有明显理由而低估我的答案的机器人：

事件处理程序仅绑定到当前选定的元素;他们在您的代码调用.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);
});

EDIT2：

我想到了这一点，您可以通过使用.data（）并根据事件查询或存储它来改进它（我的按钮被其名称“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元素内的复选框。

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

4 个答案: