jquery/javascript uncheck all checkboxes apart from the one clicked

I have a table which has a series of check boxes. When a user clicks one of these check boxes I plan to do a little ajax to populate a table elsewhere on the page.

But also when the user clicks the check box I want to make sure that all the other check boxes with the same class get cleared but not the one which has been clicked.

How do I do that? (by the way for a few reasons I don't want to use radio buttons)

here's my code for completeness

<table>
<tr>
    <td colspan="2">Jelly Babies</td>
    <td></td>
</tr>
<tr class="roomAmPmSelectTr">
    <td class="amPmCheckbox"><input type="hidden" name="data[Child][remember_me]" id="ChildRememberMe_" value="0"/><input type="checkbox" name="data[Child][remember_me]"  class="styled" value="1" id="ChildRememberMe"/> <span class="checkboxLabel">&nbsp;AM&nbsp;</span></td>
    <td class="amPmCheckbox"><input type="hidden" name="data[Child][remember_me]" id="ChildRememberMe_" value="0"/><input type="checkbox" name="data[Child][remember_me]"  class="styled" value="1" id="ChildRememberMe"/> <span class="checkboxLabel">&nbsp;PM&nbsp;</span></td>
    <td></td>
</tr>
<tr>
    <td colspan="2">Jelly Tots</td>
    <td></td>
</tr>
<tr class="roomAmPmSelectTr">
    <td class="amPmCheckbox"><input type="hidden" name="data[Child][remember_me]" id="ChildRememberMe_" value="0"/><input type="checkbox" name="data[Child][remember_me]"  class="styled" value="1" id="ChildRememberMe"/> <span class="checkboxLabel">&nbsp;AM&nbsp;</span></td>
    <td class="amPmCheckbox"><input type="hidden" name="data[Child][remember_me]" id="ChildRememberMe_" value="0"/><input type="checkbox" name="data[Child][remember_me]"  class="styled" value="1" id="ChildRememberMe"/> <span class="checkboxLabel">&nbsp;PM&nbsp;</span></td>
    <td></td>
</tr>
</table>

Answers


Something like this will toggle the checked state of all boxes that weren't the one you clicked on:

$(function() {
  $('.styled').click(toggleBoxState);
});

function toggleBoxState(){
    var clickedBox = $(this);
    $('.styled').each(function( index ) {
        var thisBox = $(this);
        if(clickedBox.attr('id') != thisBox.attr('id')){
            if(clickedBox.prop('checked'))
               thisBox.prop('checked', false);
        }
    });
}

Just add the toggleBoxState function to the click event handler for the checkboxes of class .amPmCheckbox

Note I also made your ids unique in order for this to be both compliant and so it would work.

<table>
<tr>
    <td colspan="2">Jelly Babies</td>
    <td></td>
</tr>
<tr class="roomAmPmSelectTr">
    <td class="amPmCheckbox"><input type="hidden" name="data[Child][remember_me]" id="ChildRememberMe1_" value="0"/><input type="checkbox" name="data[Child][remember_me]"  class="styled" value="1" id="ChildRememberMe1"/> <span class="checkboxLabel">&nbsp;AM&nbsp;</span></td>
    <td class="amPmCheckbox"><input type="hidden" name="data[Child][remember_me]" id="ChildRememberMe2_" value="0"/><input type="checkbox" name="data[Child][remember_me]"  class="styled" value="1" id="ChildRememberMe2"/> <span class="checkboxLabel">&nbsp;PM&nbsp;</span></td>
    <td></td>
</tr>
<tr>
    <td colspan="2">Jelly Tots</td>
    <td></td>
</tr>
<tr class="roomAmPmSelectTr">
    <td class="amPmCheckbox"><input type="hidden" name="data[Child][remember_me]" id="ChildRememberMe3_" value="0"/><input type="checkbox" name="data[Child][remember_me]"  class="styled" value="1" id="ChildRememberMe3"/> <span class="checkboxLabel">&nbsp;AM&nbsp;</span></td>
    <td class="amPmCheckbox"><input type="hidden" name="data[Child][remember_me]" id="ChildRememberMe4_" value="0"/><input type="checkbox" name="data[Child][remember_me]"  class="styled" value="1" id="ChildRememberMe4"/> <span class="checkboxLabel">&nbsp;PM&nbsp;</span></td>
    <td></td>
</tr>
</table>

You can see it in action at jsfiddle: http://jsfiddle.net/8gfgp/1/


Need Your Help

Qt: singleton logging class get different instance accross plugins and thread

qt thread-safety singleton

I have spent hours trying to understand why my logger class does not work.

How to catch click event from <div id=“whatever”><a class=“action-add” href=“/x/y/z”>add</a></div>

jquery jquery-ui

Looking to catch the click eventfrom this anchor embedded within a div....the anchor actually calls a modal dialog form and I need to supress that call so the popup doesn't come up.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.