Geek asks and answers

JQuery select all checkbox only if it is not selected

How can I make sure that the user who checked the box should not be approved or rejected by everyone? and let him say, if the user selects two approve(for example) and clicks on reject all, then it should be checked only two in reject column, since two flags are already marked in the "Approve" column

This is what I am trying and will not complete, but you will get an idea of ​​what I am trying to do.

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

0
source share
3 answers

Is this what you are looking for? Notice, I modified your html a bit to make the process 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

+1
source

I'm not sure if you need something like this?

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

+1

I think you want to use radio buttons instead of checkboxes. The radio buttons have a built-in "select one" function and are better in terms of user interface design. And also approve / reject all fields, probably should be buttons.

When you click approve / reject all, you can iterate over the radio groups that have been tested so far and make the appropriate adjustments. Something like this will catch them:

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

More articles:


All Articles