如何更改动态复选框上的图像？

Question

我是 JQuery 的新手，非常感谢一些帮助！ 我有动态复选框，上面有一个图标和图像（复选框被隐藏）...

 plcUserReq.Controls.Add(new LiteralControl("
<div data-toggle='buttons' style='margin-top:-3px'>
  <label class='btn' for='Lines' style='padding:0px 0px 0px 0px; margin:0px 0px 0px 0px'>
     <input type='checkbox' autocomplete='off' name='chkbx' value='" + UID.ToString() + "'id='chk'"+ UID.ToString() + i.ToString() +"/>
           <i class='btn fa fa-plus-square-o' aria-hidden = 'true'>
                 <img src='http://localhost:3162/images/moderator-red.gif'></i></label></div>"));

我希望图像和图标在点击时改变......当每个复选框被点击时......

这是我正在尝试的脚本...

$("[name='chkbx']").change(function () {
        if ($(this).is(':checked'))
            {
             $(this).next().find('i').attr('class', 'btn fa fa-check-square-o');
             $(this).next().find('img').attr('src', 'http://localhost:3162/images/moderator-red.gif');
            }
        else
        {
            $(this).next().find('i').attr('class', 'btn fa fa-plus-square-o');
            $(this).next().find('img').attr('src', 'http://localhost:3162/images/moderator-blue.gif');
        }
});

当任何复选框被点击时什么都没有发生......我似乎无法弄清楚我的 JQuery 有什么问题...... 请帮忙！我被困住了！

JSFiddle：https://jsfiddle.net/Lgxacm9m/3/

选中后（应如下所示）：https://jsfiddle.net/m278c236/1/

Answer 1

在 jQuery 中，# 用于通过某个id 来标识元素。您的复选框没有chkbx 的id，而是chkbx 的name。所以：

$("#chkbx").change(function() {

应该是：

$("[name='chkbx']").change(function () {

编辑：如果事件仍未触发，则您的事件处理程序可能会在复选框元素加载到 DOM 之前尝试绑定。您可以通过确保代码仅在整个页面呈现后才执行来解决此问题。为此，请按如下方式编辑您的代码：

$(function() {
   $(document).on("change", "[name='chkbx']", change(function () {
      alert("At least the event is firing...");
      if ($(this).is(':checked'))
        {
          $(this).next().find('i').attr('class', 'btn fa fa-check-square-o');
          $(this).next().find('img').attr('src', 'http://localhost:3162/images/moderator-red.gif');
        }
        else
        {
          $(this).next().find('i').attr('class', 'btn fa fa-plus-square-o');
          $(this).next().find('img').attr('src', 'http://localhost:3162/images/moderator-blue.gif');
        }
   });
});

$(function() { }) 是 $(document).ready() 的简写