1

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

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

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

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

响应变量是“数学、科学、技术、工程”

4

4 回答 4

3

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

$("#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 ) 
        }
    });
于 2012-12-19T20:56:46.557 回答
0

最好为您的动态注入复选框提供一个类以更好地定位它们，但根据您的代码尝试：

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

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

文档中的此注释主要针对 machineghost，他们无缘无故地否决了我的答案：

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

于 2012-12-19T20:49:41.783 回答
0 
$('#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/

于 2012-12-19T20:50:27.057 回答
-1

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

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

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

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

在您的特定情况下，您可能想要执行以下操作：

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

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

于 2012-12-19T20:39:18.367 回答