error when iterating repeaters' checkbox through javascript

Question

HTML

 <script type="text/javascript" language="javascript">
    function toggleSelectionRepeater(source) {        
        var isChecked = source.checked;            
        $("#tblListing input[id*='chkListingName']").each(function(index) {
            alert('in');
            $(this).attr('checked', false);
        });
        source.checked = isChecked;
    }

 </script>  

<div id="tblListing" runat="server">
<table>
<asp:Repeater ID="rptrPictureList" runat="server" OnItemDataBound="rptrPictureList_ItemDataBound">
<ItemTemplate>        
<tr>
<td><asp:CheckBox ID="chkListingName" runat="server" CssClass="cb"  /></td>        
<td></td>
</tr>
</ItemTemplate>
</asp:Repeater>
<tr><td><div><input type="submit"  name="cmdSendEmail" id="cmdSendEmail" value="Send Email/s"  onclick="toggleSelectionRepeater(this);" runat="server" /></div></td></tr>     
</table>
</div>

I want to check on button click if any of the checkbox in repeater is selected or not. If any checkbox is selected then only I need to send email so I want to loop through the repeater. With this code I am getting javascript error "Object expected'. How do I loop through the repeater control. What should i change to make it run?

Answer 1

The asp:CheckBox is different on the client side as ASP.NET controls rendered to html have another id there. If you want to work with the ID you should add the ClientIDMode="Static" attribute to the checkbox. But you should not use ID as you repeat them, hence you have multiple times the same ID. Here is a workaround JSFiddle

Replace the id with the class or use another one if you need the ID for asp.net.

<asp:CheckBox class="chkListingName" runat="server" CssClass="cb"/>

But in your JS use the class.

$(".chkListingName").each(function(index) {
    $(this).attr('checked', false);
});