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

I am not getting the values in devise in database other than email id and password

ruby-on-rails devise sqlite

I have entered three other field in devise other then email n password for sign up.After entering the data when I click on sign up, it takes the empty value and shows the error message. if I remove...