单击jquery中的复选框时切换css类答案

【问题标题】：Toggle the css class when clicked on checkbox in jquery单击jquery中的复选框时切换css类
【发布时间】：2013-12-23 10:16:29
【问题描述】：

我有一个 asp.net gridview，它在服务器上运行时形成一个表。我在每个表格行中都有一个具有相同 id 的 html 复选框。

表格如下，

<table>
    <tr>
        <td class="column">
            <div id="favicon" class="class-icon">
                <input type="checkbox" id="chkSelected" onclick=check(); ">
            </div>

      </td>
      <td class="column ">
            <div id="favicon " class="class-icon ">
                        <input type="checkbox " id="chkSelected " onclick=check();">
            </div>
        </td>
    </tr>
</table>

gridview 绑定了几行。当我选中一个复选框时，我需要切换相应选中复选框的父 div 的 css 类。但并非所有其他复选框。

这是我试过的代码，

$("#chkSelected").closest('tr').find('div').toggleClass('active');

但它没有工作。也尝试了parent() 函数。请任何人帮助我实现这一目标。

提前致谢！！

【问题讨论】：

invalid #1, #1, #1 不能使用相同的 ID。最好改用类。

标签： jquery asp.net gridview input checkbox

【解决方案1】：

HTML 的元素必须有唯一的 ID

$(".chkSelected").live("click",function(){
    $(this).parent('div').toggleClass("active");  
});

参考http://jsfiddle.net/pLxGk/3/

【讨论】：

【解决方案2】：

你应该使用：

$("#chkSelected").parent('div.class-icon').toggleClass('active');

您应该为复选框设置唯一的 ID。

【讨论】：

【解决方案3】：

一个元素的ID必须是唯一的，使用class代替对相似的元素进行分组

        <td class="column">
            <div class="class-icon favicon">
                <input type="checkbox" class="chkSelected"/>
            </div>
        </td>
    </tr>
</table>

然后使用jQuery事件处理程序

jQuery(function ($) {
    $('.chkSelected').change(function () {
        //the targeted div is the parent, so you can use .parent(), no need to use .closest(...).find(...)
        $(this).parent().toggleClass('active');
        //$(this).closest('tr').find('div').toggleClass('active');
    })
})

【讨论】：

谢谢@Arun。我使用的复选框不能有唯一的 id。我正在使用客户端控件和包装在 gridview 项目模板中的复选框。因此，所有的复选框都将具有相同的 id。
@Mahe 然后删除 id 属性...反正我们不需要它
它在浏览器控制台中出现此错误，“$(...).parent.toggleClass 不是函数。请提供更多建议。我陷入僵局。
@Mahe 抱歉，应该是$(this).parent().toggleClass('active');