jquery - jQuery 仅在未选中时选择所有复选框

Question

我如何确保用户选择复选框应该只批准或拒绝全部而不是两者？让我们说如果用户选择两个approve（例如）并单击，reject all那么它应该只在两个复选框中选中，reject column因为两个复选框已经在“批准列”中选中

这是我尝试但未完成的内容，但您会了解我正在尝试做的事情。

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

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'));
    });        
});​

和演示

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>

​</p>

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);
    });
});​

现场演示

Answer 3

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

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

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