Question

如何确保用户选择复选框只应批准或拒绝所有选项？如果用户选择两个approve（例如）并点击reject all，那么只应在reject column中检查两个，因为已经在'批准中选中了两个复选框列'

这是我尝试而不是完成的内容，但你会知道我想要做什么。

Answer 1

我不确定你需要这样的东西吗？

$(function(){
    $('input[name=approve]').click(function(){
        $('.style6 input').attr('checked', $(this).is(':checked'));
    });          

    $('input[name=reject]').click(function(){
        $('.style5 input').attr('checked', $(this).is(':checked'));
    });        
});

demo

Answer 2

这是你在找什么？注意我稍微更改了你的html以使这个过程更容易。

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

Answer 3

我认为您想使用单选按钮而不是复选框。单选按钮预先构建了这种“选择一个”功能，从UI设计角度来看更好。批准/拒绝所有方框也应该是按钮。

当您单击批准/拒绝全部时，您可以迭代到目前为止已检查的无线电组并进行适当的调整。这样的东西会抓住那些：

$('input:radio[name=bar]:checked')

jQuery仅在未选中时选中所有复选框

3 个答案: