can't unchecked checkbox with input button, and what's wrong with my checkbox?

Question

when i click the checkbox which i have integrated with javascript all under control, all checkbox which i have selected is checked to and vice versa when i unchecked.

the problem is here. 1. i will integrated button with checkbox, it's fine when i click button the checkbox is checked, but other checkbox can't follow checked.

2. second problem when in click again for unchecked it's not working.

what's wrong with my code? it's so hard for me

Here's my html code:

<div class="container">
                <center>
                    <h2 style="color: white; padding-top: 32px; font-size: 50px; font-family: 'Gotham Bold';"><b>Pilih Nominal</b></h2>
                    <div style="margin-top: 35px; margin-left: -22px;">

                        <form action="" method="POST">
            <input type="hidden" name="sqn" value="20160625110635">
            <input type="hidden" name="saldo" value="Array">
            <input type="hidden" name="mac" value="64:70:02:4a:a7:e4">
            <input type="hidden" name="tid" value="01">
            <input type="hidden" name="msidn" value="6287875230364">
            <input type="hidden" name="typ" value="PREPAID">
            <input type="hidden" name="ip" value="192.168.1.1">
            <input type="hidden" name="cmd" value="prepaid-type">
<table id="tab1"><tr><td id="1">
    <button type="button" id="c1">
    1
    </button>
    <input type="checkbox" name="checkAll" id="checkAll">全選
    <input type="checkbox" name="book1" id="book" value="book1">book1
    <input type="checkbox" name="book2" id="book" value="book2">book2
    <input type="checkbox" name="book3" id="book" value="book3">book3
    <input type="checkbox" name="book4" id="book" value="book4">book4
    <input type="checkbox" name="book5" id="book" value="book5">book5
    </td></tr>
    <tr><td id="2">
    <button type="button" id="c2">
    2
    </button>
    <input type="checkbox" name="checkAll" id="checkAll2">全選
    <input type="checkbox" name="book1" id="book" value="book1">book1
    <input type="checkbox" name="book2" id="book" value="book2">book2
    <input type="checkbox" name="book3" id="book" value="book3">book3
    <input type="checkbox" name="book4" id="book" value="book4">book4
    <input type="checkbox" name="book5" id="book" value="book5">book5
    </td></tr>
   </table>
               <input type="submit" name="sbm" value="Submit" 
               class="button primary">
                        </form>
            </div>

Here's my javascript code:

    $("#1 #checkAll").click(function () {
        if ($("#1 #checkAll").is(':checked')) {
            $("#1 input[type=checkbox]").each(function () {
                $(this).prop("checked", true);
            });
        } else {
            $("#1 input[type=checkbox]").each(function () {
                $(this).prop("checked", false);
            });
        }
    });
      $("#2 #checkAll2").click(function () {
        if ($("#2 #checkAll2").is(':checked')) {
            $("#2 input[type=checkbox]").each(function () {
                $(this).prop("checked", true);
            });
        } else {
            $("#2 input[type=checkbox]").each(function () {
                $(this).prop("checked", false);
            });
        }
    });

 $('#c1').on('click', function(){
        var $$ = $(this)
        if( !$$.is('.checked')){
            $('#checkAll').prop('checked', true);
        } else {
            $$.removeClass('checked');
            $$.addClass('unchecked');
            $('#checkAll').prop('checked', false);
        }
    })
     $('#c2').on('click', function(){
        var $$ = $(this)
        if( !$$.is('.checked')){
            $('#checkAll2').prop('checked', true);
        } else {
            $$.removeClass('checked');
            $$.addClass('unchecked');
            $('#checkAll2').prop('checked', false);
        }
    })

This is my fiddle: JSFIDDLE

Answer 1

A simplified solution:

$("#1 #checkAll").click(function() {
  $("#1 input[type=checkbox]").prop("checked", this.checked);
});
$("#2 #checkAll2").click(function() {
  $("#2 input[type=checkbox]").prop("checked", this.checked);
});

$('#c1').on('click', function() {
  $('#checkAll').prop('checked', function() {
    return !!this.checked;
  }).click();
})
$('#c2').on('click', function() {
  $('#checkAll2').prop('checked', function() {
    return !!this.checked;
  }).click();
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="container">
  <center>
    <h2 style="color: white; padding-top: 32px; font-size: 50px; font-family: 'Gotham Bold';"><b>Pilih Nominal</b></h2>
    <div style="margin-top: 35px; margin-left: -22px;">
      <form action="" method="POST">
        <input type="hidden" name="sqn" value="20160625110635">
        <input type="hidden" name="saldo" value="Array">
        <input type="hidden" name="mac" value="64:70:02:4a:a7:e4">
        <input type="hidden" name="tid" value="01">
        <input type="hidden" name="msidn" value="6287875230364">
        <input type="hidden" name="typ" value="PREPAID">
        <input type="hidden" name="ip" value="192.168.1.1">
        <input type="hidden" name="cmd" value="prepaid-type">
        <table id="tab1">
          <tr>
            <td id="1">
              <button type="button" id="c1">
                1
              </button>
              <input type="checkbox" name="checkAll" id="checkAll">全選
              <input type="checkbox" name="book1" id="book" value="book1">book1
              <input type="checkbox" name="book2" id="book" value="book2">book2
              <input type="checkbox" name="book3" id="book" value="book3">book3
              <input type="checkbox" name="book4" id="book" value="book4">book4
              <input type="checkbox" name="book5" id="book" value="book5">book5
            </td>
          </tr>
          <tr>
            <td id="2">
              <button type="button" id="c2">
                2
              </button>
              <input type="checkbox" name="checkAll" id="checkAll2">全選
              <input type="checkbox" name="book1" id="book" value="book1">book1
              <input type="checkbox" name="book2" id="book" value="book2">book2
              <input type="checkbox" name="book3" id="book" value="book3">book3
              <input type="checkbox" name="book4" id="book" value="book4">book4
              <input type="checkbox" name="book5" id="book" value="book5">book5
            </td>
          </tr>
        </table>
        <input type="submit" name="sbm" value="Submit" class="button primary">
      </form>
    </div>

Or even shorter considering removing repeated code

$("[id^='checkAll']").click(function() {
  $(this).closest('td').find("input[type=checkbox]:not([name=checkAll])").prop("checked", this.checked);
});
$('button[id^=c]').on('click', function() {
  $(this).next('[id^="checkAll"]').prop('checked', function() {
    return !!this.checked;
  }).click();
});

Answer 2

$("#1 #checkAll").change(function() {//change event to change (click)
      if ($("#1 #checkAll").is(':checked')) {
        $("#1 input[type=checkbox]").each(function() {
          $(this).prop("checked", true);
        });
      } else {
        $("#1 input[type=checkbox]").each(function() {
          $(this).prop("checked", false);
        });
      }
    });
    $("#2 #checkAll2").change(function() {//change event to change (click)
      if ($("#2 #checkAll2").is(':checked')) {
        $("#2 input[type=checkbox]").each(function() {
          $(this).prop("checked", true);
        });
      } else {
        $("#2 input[type=checkbox]").each(function() {
          $(this).prop("checked", false);
        });
      }
    });

    $('#c1').on('click', function() {
      var $$ = $(this).next('#checkAll')//add .next() to get checkbox next the btn
      if ($$.is(':checked')) {//change to :checked
        $('#checkAll').prop('checked', false).change();//change false ; add manual call to change event
      } else {
        $('#checkAll').prop('checked', true).change();//change true; add manual call to change event
      }
    })
    $('#c2').on('click', function() {
      var $$ = $(this).next('#checkAll2')//add .next() to get checkbox next the btn
      if ($$.is(':checked')) {//change to :checked
        $('#checkAll2').prop('checked', false).change();//change false; add manual call to change event
      } else {
        $('#checkAll2').prop('checked', true).change();//change true; add manual call to change event
      }
    })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <center>
    <h2 style="color: white; padding-top: 32px; font-size: 50px; font-family: 'Gotham Bold';"><b>Pilih Nominal</b></h2>
    <div style="margin-top: 35px; margin-left: -22px;">

      <form action="" method="POST">
        <input type="hidden" name="sqn" value="20160625110635">
        <input type="hidden" name="saldo" value="Array">
        <input type="hidden" name="mac" value="64:70:02:4a:a7:e4">
        <input type="hidden" name="tid" value="01">
        <input type="hidden" name="msidn" value="6287875230364">
        <input type="hidden" name="typ" value="PREPAID">
        <input type="hidden" name="ip" value="192.168.1.1">
        <input type="hidden" name="cmd" value="prepaid-type">
        <table id="tab1">
          <tr>
            <td id="1">
              <button type="button" id="c1">
                1
              </button>
              <input type="checkbox" name="checkAll" id="checkAll">全選
              <input type="checkbox" name="book1" id="book" value="book1">book1
              <input type="checkbox" name="book2" id="book" value="book2">book2
              <input type="checkbox" name="book3" id="book" value="book3">book3
              <input type="checkbox" name="book4" id="book" value="book4">book4
              <input type="checkbox" name="book5" id="book" value="book5">book5
            </td>
          </tr>
          <tr>
            <td id="2">
              <button type="button" id="c2">
                2
              </button>
              <input type="checkbox" name="checkAll" id="checkAll2">全選
              <input type="checkbox" name="book1" id="book" value="book1">book1
              <input type="checkbox" name="book2" id="book" value="book2">book2
              <input type="checkbox" name="book3" id="book" value="book3">book3
              <input type="checkbox" name="book4" id="book" value="book4">book4
              <input type="checkbox" name="book5" id="book" value="book5">book5
            </td>
          </tr>
        </table>
        <input type="submit" name="sbm" value="Submit" class="button primary">
      </form>
    </div>

1. When using checkbox i prefer change event than click
2. On button click to change checkall checked status call manually change event
3. Added .next() to find the checkbox that is next the button