CODEWITHSUNDEEP
javascriptjquery
AabinGunz
AabinGunz

Reputation: 12347

uncheck all checkboxes on button click using jquery

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

Upvotes: 1

Views: 10316

Answers (6)

Balakrishnan Bsk
Balakrishnan Bsk

Reputation: 493

Use Prop instead of using attr

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

Upvotes: 0

Jos&#233; Valente
Jos&#233; Valente

Reputation: 331

Try this: 

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

Upvotes: 2

venimus
venimus

Reputation: 6077

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 recommend you add them if you are using them in forms

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

Note: Do not use this method to remove native properties such as checked, disabled, or selected. This will remove the property completely 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);

Upvotes: 2

Matej Janovč&#237;k
Matej Janovč&#237;k

Reputation: 1262

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

Upvotes: 0

Pantelis
Pantelis

Reputation: 6146

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

Upvotes: 0

Dhruva Sagar
Dhruva Sagar

Reputation: 7307

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.

Upvotes: 0

Related Questions