jQuery仅在未选中时选中所有复选框 [英] jQuery select all checkbox only if its not selected

问题描述

我如何确保用户选择复选框仅应批准或拒绝全部而不是全部?并说如果用户选择两个approve(例如)并单击reject all，则应该只在reject column中将其选中，因为在批准列"中已经选中了两个复选框

How can I make sure the user select the checkbox should only be approve or reject all not both? and let says if the user select two approve (for an example) and click on reject all then it should only be checked two in the reject column since two checkbox is already checked in the 'approve column'

这是我尝试而不是完成的事情，但是您会了解我正在尝试做的事情.

Here is what i attempt and not complet but you will get an idea of what i am trying to do.

http://jsfiddle.net/abuhamzah/CgqVw/6/

推荐答案

这是您要找的东西吗?注意，我对您的html进行了一些更改，以使该过程更容易一些.

Is this what you are looking for? Note I changed your html a little to make the process a little easier.

HTML :

<table class="style1" border="1">
    <tr>
        <td>
            Approve All<br />
            <input type="checkbox" name="approve" />
        </td>
        <td>
            Reject All<br />
            <input type="checkbox" name="reject" />
        </td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" name="employee" class="approve" />
            <span>John</span>
        </td>
        <td>
            <input type="checkbox" name="employer" class="reject" />
        </td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" name="employee0" class="approve" />
            <span>John</span>
        </td>
        <td>
            <input type="checkbox" name="employer" class="reject" />
       </td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" name="employee1" class="approve" />
            <span>John</span>
        </td>
        <td>
            <input type="checkbox" name="employer" class="reject" />
        </td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" name="employee" class="approve" />
            <span>John</span>
        </td>
        <td>
            <input type="checkbox" name="employer" class="reject" />
       </td>
    </tr>
</table>

JavaScript :

$(function(){
    $('input[name=approve]').click(function(){
        var checked = this.checked;

        $('.approve').each(function() {
            if($(this).closest('tr').find('.reject').prop('checked') == false)
                this.checked = checked;
        });
    });          

    $('input[name=reject]').click(function(){
        var checked = this.checked;

        $('.reject').each(function() {
            if($(this).closest('tr').find('.approve').prop('checked') == false)
                this.checked = checked;
        });
    });

    $('.approve').click(function() {
        $(this).closest('tr').find('.reject').prop('checked', !this.checked);
    });

     $('.reject').click(function() {
        $(this).closest('tr').find('.approve').prop('checked', !this.checked);
    });
});​

实时演示

Live DEMO

这篇关于jQuery仅在未选中时选中所有复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！