1

Goal:
When you have checked the checkbox with id="bbbbbb" everthing should be selected and when you deselect the specific checkbox that has a class "asdf" the checkbox with id="bbbbbb" should be deselected.

Problem:
I don't know how to do it.

Info:
This code below is used today in production phase.

JSFiddle DEMO

Thanks!

$("#candy input[type=checkbox]").on("change", function () {
    if (this.checked) {
        $(this).parents('tr').addClass('selected');
        $('#dd').removeClass('selected');
    } else {
        $(this).parents('tr').removeClass('selected');
        $('#dd').removeClass('selected');
    }
});


$('#bbbbbb').click(function () {
    var checked = $("#bbbbbb").is(':checked');
    $(".asdf").each(function () {
        $(this).prop('checked', checked);
        if (checked) {
            $(this).parents('tr').addClass('selected');
            $('#dd').removeClass('selected');
        } else {
            $(this).parents('tr').removeClass('selected');
            $('#dd').removeClass('selected');
        }
    });
});
tr.selected {
    background-color: #FEF0BF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table id="candy">
    <tr id="dd">
        <th>
            <input type="checkbox" id="bbbbbb" />
        </th>
        <th width="20">a</th>
        <th width="20">b</th>
        <th width="20">c</th>
        <th width="20">d</th>
        <th width="20">e</th>
        <th width="20 ">f</th>
        <th width="20 ">g</th>
        <th width="20 ">h</th>
    </tr>
    <tr>
        <td><input type="checkbox" class="asdf"  /></td>
        <td>v</td>
        <td>v</td>
        <td>v</td>
        <td>v</td>
        <td>v</td>
        <td>v</td>
        <td>v</td>
        <td>v</td>
        <td>v</td>                                 
    </tr>
    <tr>
        <td><input type="checkbox" class="asdf"  /></td>
        <td>e</td>
        <td>e</td>
        <td>e</td>
        <td>e</td>
        <td>e</td>
        <td>e</td>
        <td>e</td>
        <td>e</td>
        <td>e</td>                                  
    </tr>
    <tr>
        <td><input type="checkbox" class="asdf"  /></td>
        <td>q</td>
        <td>q</td>
        <td>q</td>
        <td>q</td>
        <td>q</td>
        <td>q</td>
        <td>q</td>
        <td>q</td>
        <td>q</td>                                  
    </tr>
</table>
rrk
  • 15,677
  • 4
  • 29
  • 45
HelloWorld1
  • 13,688
  • 28
  • 82
  • 145
  • There is example http://jsfiddle.net/qabnx4ph/28/ ... if You uncheck any of them, `#bbbbbb` will be unchecked, but if You check all of them again (not by `bbbbbb`), but one by one, `#bbbbbb` will be automatically checked again. – nelek Sep 22 '15 at 18:42

6 Answers6

0

I added the following code to your JS to get the functionality you are looking for. Let me know if this is exact functionality that you wanted.

$('.asdf').click(function() {
    $('#bbbbbb').prop('checked', false);
});

jsFiddle

Sohrab Hejazi
  • 1,441
  • 6
  • 18
  • 29
  • This adds an additional event handler, while there is already a condition in the existing event handler that can be used. – Neil S Sep 22 '15 at 18:31
0

You need to set the checked attribute of element id="bbbbbb" to false when a change event is triggered.

here is the updated fiddle: http://jsfiddle.net/qabnx4ph/27/

You just needed to add 

$('#bbbbbb').prop('checked', false);

to your else condition in the change event.

Neil S
  • 2,304
  • 21
  • 28
0

You need to add two additional checks, one at the beginning to see if you should uncheck the all check, and one at the end to see if you should check the all check.

$("#candy input[type=checkbox]").on("change", function () {
        if($(this).attr('id')!='bbbbbb'&&$('#bbbbbb').is(':checked')){
            $('#bbbbbb').attr('checked', false);  
        }
        if (this.checked) {
            $(this).parents('tr').addClass('selected');
            $('#dd').removeClass('selected');
        } else {
            $(this).parents('tr').removeClass('selected');
            $('#dd').removeClass('selected');
        }
        if(!$('#bbbbbb').is(':checked')&&$('.asdf:checked').length==3){
            $('#bbbbbb').click();  
        }
    });

fiddle

depperm
  • 10,606
  • 4
  • 43
  • 67
0

Use 

$('.asdf').click(function() {
    var checkedAll = $('.asdf').not(':checked').length == 0;
    $('#bbbbbb').prop('checked', checkedAll );
});

This works in both logic. Checking all .asdf makes #bbbbbb checked and un-checking even one unchecks the #bbbbbb.

$("#candy input[type=checkbox]").on("change", function () {
    if (this.checked) {
        $(this).parents('tr').addClass('selected');
        $('#dd').removeClass('selected');
    } else {
        $(this).parents('tr').removeClass('selected');
        $('#dd').removeClass('selected');
    }
});


$('#bbbbbb').click(function () {
    var checked = $("#bbbbbb").is(':checked');
    $(".asdf").each(function () {
        $(this).prop('checked', checked);
        if (checked) {
            $(this).parents('tr').addClass('selected');
            $('#dd').removeClass('selected');
        } else {
            $(this).parents('tr').removeClass('selected');
            $('#dd').removeClass('selected');
        }
    });
});

$('.asdf').click(function() {
    var checkedAll = $('.asdf').not(':checked').length == 0;
    $('#bbbbbb').prop('checked', checkedAll );
});
tr.selected {
    background-color: #FEF0BF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table id="candy">
    <tr id="dd">
        <th>
            <input type="checkbox" id="bbbbbb" />
        </th>
        <th width="20">a</th>
        <th width="20">b</th>
        <th width="20">c</th>
        <th width="20">d</th>
        <th width="20">e</th>
        <th width="20 ">f</th>
        <th width="20 ">g</th>
        <th width="20 ">h</th>
    </tr>
    <tr>
        <td><input type="checkbox" class="asdf"  /></td>
        <td>v</td>
        <td>v</td>
        <td>v</td>
        <td>v</td>
        <td>v</td>
        <td>v</td>
        <td>v</td>
        <td>v</td>
        <td>v</td>                                 
    </tr>
    <tr>
        <td><input type="checkbox" class="asdf"  /></td>
        <td>e</td>
        <td>e</td>
        <td>e</td>
        <td>e</td>
        <td>e</td>
        <td>e</td>
        <td>e</td>
        <td>e</td>
        <td>e</td>                                  
    </tr>
    <tr>
        <td><input type="checkbox" class="asdf"  /></td>
        <td>q</td>
        <td>q</td>
        <td>q</td>
        <td>q</td>
        <td>q</td>
        <td>q</td>
        <td>q</td>
        <td>q</td>
        <td>q</td>                                  
    </tr>
</table>
rrk
  • 15,677
  • 4
  • 29
  • 45
0

Done with one event listener and a bit of tests upon change.

When #bbbbbb changes, if it gets checked, all other become checked. When .asdf changes, if it gets unchecked, #bbbbbb becomes unchecked.

var table = $('#candy'),
    mainInput = $('#bbbbbb'),
    subInput = table.find('input.asdf');

table.on('change', 'input[type=checkbox]', function () {
    var input = $(this),
        isChecked = input.prop('checked'),
        isMain = this.id === 'bbbbbb',
        isSub = input.hasClass('asdf');

    input.closest('tr').toggleClass('selected', isChecked);

    if (isChecked && isMain) {
        subInput
            .prop('checked', true)
            .change();
    }
    if (!isChecked && isSub) {
        mainInput
            .prop('checked', false)
            .change();
    }
});
tr.selected {
  background-color: #FEF0BF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table id="candy" >
 <tr id="dd">
  <th><input type="checkbox" id="bbbbbb" /></th>
  <th width="20">a</th>
  <th width="20">b</th>
  <th width="20">c</th>
  <th width="20">d</th>
  <th width="20">e</th>
  <th width="20">f</th>
  <th width="20">g</th>
  <th width="20">h</th>
 </tr>
 <tr>
  <td><input type="checkbox" class="asdf"  /></td>
  <td>v</td>
  <td>v</td>
  <td>v</td>
  <td>v</td>
  <td>v</td>
  <td>v</td>
  <td>v</td>
  <td>v</td>
  <td>v</td>                                 
 </tr>
 <tr>
  <td><input type="checkbox" class="asdf"  /></td>
  <td>e</td>
  <td>e</td>
  <td>e</td>
  <td>e</td>
  <td>e</td>
  <td>e</td>
  <td>e</td>
  <td>e</td>
  <td>e</td>                                  
 </tr>
    <tr>
  <td><input type="checkbox" class="asdf"  /></td>
  <td>q</td>
  <td>q</td>
  <td>q</td>
  <td>q</td>
  <td>q</td>
  <td>q</td>
  <td>q</td>
  <td>q</td>
  <td>q</td>                                  
 </tr>
</table>
saeraphin
  • 395
  • 1
  • 9
-1

To uncheck #bbbbbb when you click (and check) any .asd checkboxes:

$(".asdf").click( function() {
    if ( $(this).prop('checked') )
        $('#bbbbbb').removeAttr('checked');
});
GrafiCode
  • 3,307
  • 3
  • 26
  • 31
  • You should not use `$(...).removeAttr('checked')`, as it is a property. – saeraphin Sep 22 '15 at 18:41
  • uhm, here it says it might be the same http://stackoverflow.com/questions/6169826/propchecked-false-or-removeattrchecked answered by a 17K reputation stackER – GrafiCode Sep 22 '15 at 18:46
  • It also says that it is a backward compatibility fix and using prop is the most correct way to go. – saeraphin Sep 22 '15 at 18:51
  • well that's true. also, as you noticed in the first comment, prop doesn't touch the tag's attribute and that is always good – GrafiCode Sep 22 '15 at 18:58