jQuery：用于监听表中每个复选框的函数

Question

我生成了这个表：

用这个：

$.ajax({
    type: "POST",
    url: action,
    data: dataToSearchProfile,
    dataType: "json",
    success: function(response) {

       if(response.success == "success") {
             $('#rBuscarPerfil tr:gt(0)').remove();
             $.each(response, function (index,record){
                 var row = $("<tr class='"+record.IdPerfil+"'/>");
                 $("<td />").text(record.NomPerfil).appendTo(row);
                 $("<td />").text(record.DesPerfil).appendTo(row);
                 $("<td />").html("<a href='#'>Modificar</a>").appendTo(row);
                 if (record.EdoPerfil == 1) {
                    $("<td />").html("<input class='"+record.IdPerfil+"' type='checkbox' checked/>").appendTo(row);
                    row.css("backgroundColor","#bbf2b5");
                 } else {
                      $("<td />").html("<input class='"+record.IdPerfil+"' type='checkbox' />").appendTo(row);
                      row.css("backgroundColor","#fcbfc4");
                 }
                 row.appendTo("#rBuscarPerfil");
            });
       } else {
             $('#errorSearchProfile').html("No se han encontrado resultados para: <b>"+termSearch+"</b>").css("color","red");
       }
  }

});

当用户签入表格中的任何复选框时，将执行从更改背景到行的指令（如果选中则为绿色，如果未选中则为红色）然后将执行另一个函数ajax以更新数据库中的记录等...我最感兴趣的是知道如何听每个复选框来执行指令。

我希望能帮到我！

Answer 1

只需将click的代表放在您的#rBuscarPerfil上。因为您要动态创建行。您在行上创建的任何事件（在创建之前）都无法正常工作。

演示： http://jsfiddle.net/ThinkingStiff/Y355x/

脚本

$( '#rBuscarPerfil' ).on( 'click', 'input[type="checkbox"]', function() {
    $( this ).closest( 'tr' ).toggleClass( 'green' );
});​

HTML

<table id="rBuscarPerfil">
    <tr class="green"><td>1</td><td><input class="1" type="checkbox" checked/></td></tr>
    <tr><td>2</td><td><input class="1" type="checkbox"/></td></tr>
    <tr class="green"><td>3</td><td><input class="1" type="checkbox" checked/></td></tr>
</table>​

CSS

tr {
    background-color: red;
}

.green {
    background-color: green !important;
}​

Answer 2

这是您需要的完整解决方案。根据未选中的选中状态，它将根据复选框当前状态执行操作。

<强> HTML

<table id="rBuscarPerfil" width="90%">
  <tr>
    <th>
      NOMBRE
    </th>
    <th>
      DESCRIPTION
    </th>
    <th>
      ACTION
    </th>
    <th>
      ACTIVO
    </th>
  </tr>

  <tr>
    <td class="red">
      Perfil Uno
    </td>
    <td class="red">
      Description Del Perfil Uno
    </td>
    <td class="red">
      <input type="button" value="Modificar"/>
    </td>
    <td class="red">
      <input type="checkbox" name="chk1" />
    </td>
  </tr>
  <tr>
    <td class="red">
      Perfil Dos
    </td>
    <td class="red">
      Description Del Perfil Dos
    </td>
    <td class="red">
      <input type="button" value="Modificar"/>
    </td>
    <td class="red">
      <input type="checkbox" name="chk1" />
    </td>
  </tr>
  <tr>
    <td class="red">
      Perfil20
    </td>
    <td class="red">
      Description Del Perfil20
    </td>
    <td class="red">
      <input type="button" value="Modificar"/>
    </td>
    <td class="red">
      <input type="checkbox" name="chk1" />
    </td>
  </tr>
</table>

<强> CSS：

table#rBuscarPerfil{
  border:2px solid #ddd;
  font-family:Helvetica;
  font-size:12px;

}

table#rBuscarPerfil th{
  border:1px solid #ddd;
  font-size:14px;

  background-color:#224488;
  color:#ddd;
  padding:5px;
}
table#rBuscarPerfil td{
  text-align:center;
  border:1px solid #ddd;
  padding:1px;
}
table#rBuscarPerfil td.red{
  background:#f698aa;
}
table#rBuscarPerfil td.green{
  background:#a5f6a8;
}
table#rBuscarPerfil input[type=button]{
  border:1px solid #333;
  background:#dcdcdc;
}

<强> jQuery的：

$(function() {
    $("table#rBuscarPerfil input[type=checkbox]").change(function() {
        if ($(this).is(":checked")) {
            $(this).closest("tr").find("td").each(function() {
                $(this).removeClass("red");
                $(this).addClass("green");

            });
        } else {
            $(this).closest("tr").find("td").each(function() {
                $(this).removeClass("green");
                $(this).addClass("red");
            });
        }

    });
});

我已在http://codebins.com/bin/4ldqpa6

上为上述问题创建了垃圾箱

Answer 3

您是否只能在调用函数的复选框中添加onclick标记？

就像它一样：

$("<td />").html("<input onclick='javascript:doSomething(this);' class='"+record.IdPerfil+"' type='checkbox' checked/>").appendTo(row);

然后有一个功能

function doSomething(checkbox) {

}

Answer 4

$('body').on('change','#rBuscarPerfil input[type="checkbox"]',function(){
//your stuff
});