javascript - 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' />");
            }           
        }
    });
}

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

我似乎根本找不到选择复选框的方法。

响应变量是“math,science,technology,engineering”

Answer 1

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

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

为了更好地捕获数据，最好将相应的数据封装到一个 span 中，以便于搜索。

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