Question

可能重复：
How to listen to when a checkbox is checked in Jquery

我正在使用JQuery动态创建一些复选框，如下所示。

     function createCheckbox(len){

        for(var i = 0; i < len; i++){
            $('#checkboxes').append('<input type="checkbox" ' + 'id=' + i + '></input>');
        }
        return;
      }

在HTML中，我有：

<div id="checkboxes"></div>

我的目标是每当选中复选框时，都可以将其ID（或值）发送到此函数：

function hideColumn(columnIndex){
        $('#chart2 td:nth-child(' + (columnIndex+1) + ')').hide(); 
        return;
      }

这将能够处理隐藏表格中特定列的逻辑。可以somone请帮帮我吗？感谢

Answer 1

当您动态创建checkbox时，您必须使用jQuery .on()来使用委托事件。

$('#checkboxes').on('change', ':checkbox', function() {
  if( this.checked ) {
    hideColumn( this.id ); // to send value use:   this.value
                           // but in your append code 
                           // there is no value attribute
  }
});

注意

委托事件的.on()语法如下：

$( StaticElement ).on( eventName, target, handlerFunction );

其中，StaticElement指的是非动态元素。

Answer 2

可能是你可以试试这个，只需修改createCheckbox函数：

function createCheckbox(len){
    for(var i = 0; i < len; i++){
        $('<input type="checkbox" ' + 'id=' + i + '></input>').on('change', function(e) {
            if (this.checked) {
                hideColumn(this.id);
            }
        }).appendTo($('#checkboxes'));
    }
    return;
}

Answer 3

你尝试过这样的事吗？：

$("#checkboxes :checkbox").on('change', function(e) {
    if (this.checked) {
        hideColumn(this.id);
    }
});

Answer 4

在jQuery API中看起来很简单！

function createCheckbox(len) {    
  for (var i = 0; i < len; i++) {        
    $('<input type="checkbox" ' + 'id=' + i + '></input>').on('change', function(e) {
      if (this.checked) {
        hideColumn(this.id);
      }
    }).appendTo($('#checkboxes'));
  }
  return; 
}

选中时触发复选框

4 个答案:

注意