Question

我有一张桌子，里面有一系列复选框。当用户单击其中一个复选框时，我打算做一点ajax来填充页面上其他位置的表。

但是当用户单击复选框时，我想确保清除所有其他具有相同类的复选框，但不清除已单击的复选框。

我该怎么做？（顺便说一下，我不想使用单选按钮）

这是我的完整性代码

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

Answer 1

这样的事情将切换所有不是您点击的框的选中状态：

$(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);
        }
    });
}

只需将toggleBoxState函数添加到click事件处理程序中，以获取类.amPmCheckbox的复选框

注意我也使你的id独特，以使其兼容，因此它可以工作。

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

您可以在jsfiddle：http://jsfiddle.net/8gfgp/1/

中看到它的实际效果

jquery / javascript取消选中除了单击之外的所有复选框

1 个答案: