I have this table, which get populated from an xml

<table id="tableDg" 
    style="border:#2F5882 1px solid;width:100%;"  cellspacing="1" cellpadding="1"> 

    <thead>
     <tr id="trHead" style="color :#FFFFFF;background-color: #8EA4BB" > 
         <th></th>
         <th width="2%"><input id="chkbHead" type='checkbox'  /></th>
         <th width="10%" align="center" spry:sort="name"><b>Name</b></th> 
         <th width="22%" align="center" spry:sort="host"><b>Host</b></th> 

     </tr>
     </thead>

     <tbody spry:repeat="pv1">   
     <tr class="trOdd"   
     spry:if="({ds_RowNumber} % 2) != 0" onclick="ds1.setCurrentRow('{ds_RowID}');"
        style="color :#2F5882;background-color: #FFFFFF"> 
         <td><input type="hidden" id="path" value="{path}"></input></td>
         <td><input type="checkbox" id="chkbTest" class = "chkbCsm" ></input></td>
         <td width="10%" align="center">&nbsp;&nbsp;<input type="hidden" id="nameText" readonly="true" value="{name}"><a href="#" class="aDg">{name}</a></input></td> 
         <td width="22%" align="center">&nbsp;&nbsp;<input type="hidden" id="nameText" readonly="true" value="{host}">{host}</input></td> 

     </tr> 

     <tr class="trEven" name="trEven" id="trEven"
     spry:if="({ds_RowNumber} % 2) == 0" onclick="ds1.setCurrentRow('{ds_RowID}');"
        style="color :#2F5882;background-color: #EDF1F5;"> 
         <td><input type="hidden" id="path" value="{path}"></input></td>
         <td><input type="checkbox" class = "chkbCsm" ></input></td>
         <td width="10%" align="center">&nbsp;&nbsp;<input type="hidden" id="nameText" readonly="true" value="{name}"><a href="#" class="aDg">{name}</a></input></td> 
         <td width="22%" align="center">&nbsp;&nbsp;<input type="hidden" id="nameText" readonly="true" value="{host}">{host}</input></td> 

     </tr>
     </tbody>
     </table>

on button click I am calling a function and inside that function I am doing something like below

$('#tableDg input:checkbox').removeAttr('checked');

but no luck. Help please!! I want to uncheck all the checkboxes on button click

I have this table, which get populated from an xml

<table id="tableDg" 
    style="border:#2F5882 1px solid;width:100%;"  cellspacing="1" cellpadding="1"> 

    <thead>
     <tr id="trHead" style="color :#FFFFFF;background-color: #8EA4BB" > 
         <th></th>
         <th width="2%"><input id="chkbHead" type='checkbox'  /></th>
         <th width="10%" align="center" spry:sort="name"><b>Name</b></th> 
         <th width="22%" align="center" spry:sort="host"><b>Host</b></th> 

     </tr>
     </thead>

     <tbody spry:repeat="pv1">   
     <tr class="trOdd"   
     spry:if="({ds_RowNumber} % 2) != 0" onclick="ds1.setCurrentRow('{ds_RowID}');"
        style="color :#2F5882;background-color: #FFFFFF"> 
         <td><input type="hidden" id="path" value="{path}"></input></td>
         <td><input type="checkbox" id="chkbTest" class = "chkbCsm" ></input></td>
         <td width="10%" align="center">&nbsp;&nbsp;<input type="hidden" id="nameText" readonly="true" value="{name}"><a href="#" class="aDg">{name}</a></input></td> 
         <td width="22%" align="center">&nbsp;&nbsp;<input type="hidden" id="nameText" readonly="true" value="{host}">{host}</input></td> 

     </tr> 

     <tr class="trEven" name="trEven" id="trEven"
     spry:if="({ds_RowNumber} % 2) == 0" onclick="ds1.setCurrentRow('{ds_RowID}');"
        style="color :#2F5882;background-color: #EDF1F5;"> 
         <td><input type="hidden" id="path" value="{path}"></input></td>
         <td><input type="checkbox" class = "chkbCsm" ></input></td>
         <td width="10%" align="center">&nbsp;&nbsp;<input type="hidden" id="nameText" readonly="true" value="{name}"><a href="#" class="aDg">{name}</a></input></td> 
         <td width="22%" align="center">&nbsp;&nbsp;<input type="hidden" id="nameText" readonly="true" value="{host}">{host}</input></td> 

     </tr>
     </tbody>
     </table>

on button click I am calling a function and inside that function I am doing something like below

$('#tableDg input:checkbox').removeAttr('checked');

but no luck. Help please!! I want to uncheck all the checkboxes on button click

• javascript
• jquery

• what console.log($('#tableDg input:checkbox')); is displaying? – Frias Commented Jun 14, 2011 at 11:12
• Sorry my mistake. I had some error in other part of the page. It works fine. – AabinGunz Commented Jun 14, 2011 at 11:13

6 Answers 6

Try this:

$('#tableDg input:checkbox').attr('checked',false);

i would use $('#tableDg input[type=checkbox]').removeAttr('checked');

Additional Notes: Because :checkbox is a jQuery extension and not part of the CSS specification, queries using :checkbox cannot take advantage of the performance boost provided by the native DOM querySelectorAll() method. For better performance in modern browsers, use [type="checkbox"] instead.

But I assume that the problem is not in the code you used, better provide the script that executes when you click your button

also it seems that your checkboxes do not have value and name attributes, i would remend you add them if you are using them in forms

also in 1.6 there is a .removeProp('checked') but es with a note

Note: Do not use this method to remove native properties such as checked, disabled, or selected. This will remove the property pletely and, once removed, cannot be added again to element. Use .prop() to set these properties to false instead.

so your code should be

$('#tableDg input[type=checkbox]').prop('checked', false);

I use this code to toggle checkbox status :

checked = false;
$('#select_all').click(function() {
  checked = !checked
  $(this).children('input:checkbox').attr('checked', checked);
});

Try setting 'checked' to false in your case. Also, try out the same in firebug / chrome inspect's console.

Pretty much what José Valente said, but you could also check only for checked checkboxes instead of all of them.

$('#tableDg input:checked').attr('checked',false);

You probably have table in form to handle inputs, so you can use this:

$('.my-button').click(
    function(){
        $(this).parents('form').find('input:checkbox').removeAttr('checked');
    }
)

Use Prop instead of using attr

$('#tableDg input:checked').prop('checked',false);