jquery - 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
});