单击jQuery中的复选框时切换css类

Question

我有一个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>

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

这是我尝试的代码，

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

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

提前致谢！！

Answer 1

HTML元素必须具有唯一的ID

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

请参阅http://jsfiddle.net/pLxGk/3/

Answer 2

元素的ID必须是唯一的，请改用类将相似的元素分组

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

Answer 3

您应该使用：

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

并且您应该为复选框使用唯一的ID。