动态添加单击事件到复选框,仅适用于第一个复选框JQUERY

时间:2013-03-08 17:49:11

标签: javascript jquery asp.net

所以我正在使用每个控件上的不同复选框区域的几个ascx。 我最初使用

 $('[type=checkbox]').click ( function(){ code });

它完成了工作,起初。但当我添加另一个控件,也使用复选框时,该函数也会触发其他复选框,所以我将js升级为

 $('#chck').click(function(){ code });

但有了这个,它只会触发该列表中第一个复选框的事件..如何才能触发所有点击?

我也试过这个:

 $('#chck').each(function(){ $(this).click({ function() { code }); });

这只适用于第一个

这是我的ascx页面示例:

 <asp:Repeater ID="contacts" runat="server">
            <ItemTemplate>
                <tr>
                    <td>
                        <input type="checkbox" id="chck" />
                    </td>
                  .....
                 </tr>
             </ItemTemplate>
  </asp:Repeater>

这是我的JS代码段

    $(document).ready(function(){
       $("#chck").each(function () {
           $(this).click(function () { onchange($(this)); });
       });
    });
    function onchange(checkbox) {
    // adds contact to list
    }

2 个答案:

答案 0 :(得分:3)

id必须是唯一的。改为使用一个类:

<input type="checkbox" class="chck" />
$('.chck').click(function(){ code });

答案 1 :(得分:1)

using same ids for multiple elems

上查看same page is invalid.

IDs should be unique to each element. When this happens browser only selects first of it.

要解决此问题,必须将id更改为class。所以你have to do same thing with your markup change id to class

<input type="checkbox" class="chck" /> // <----change id to class for every input

现在你的脚本应该是:

$('.chck').each(function(){ //<-----use '.' notation for class selectors 
     $(this).click(function() { 
         onchange($(this));
     }); 
});