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>

gridview绑定了几行。当我选中一个复选框时，我需要切换相应复选框的父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必须是唯一的，而是使用class来分组相似的元素

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

然后使用jQuery事件handlder

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。

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

3 个答案: