kann nicht Kontrollkästchen mit Eingabeknopf deaktiviert, und was stimmt nicht mit meiner Checkbox?

Question

wenn ich das Kontrollkästchen, das ich mit Javascript alle unter Kontrolle habe, das Kontrollkästchen, das ich ausgewählt habe aktiviert ist aktiviert und umgekehrt, wenn ich deaktiviert.

das Problem ist hier. 1. ich werde integrierte taste mit checkbox, es ist in Ordnung, wenn ich klicken taste das checkbox ist markiert, aber andere checkbox kann nicht folgen geprüft.

2. zweites Problem, wenn Sie erneut klicken, um nicht abgehakt zu werden, funktioniert es nicht.

Was ist falsch an meinem Code? es ist so schwer für mich

Hier ist mein 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> 

Hier ist mein Javascript-Code: JSFIDDLE

Answer 1

$("#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 #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); 
     } 
    }) 

Das ist meine Geige ist

1. Wenn Checkbox bevorzugen i change Ereignis als click
2. Taste Ein Klick ändern checkall Statusruf manuell Ereignis
3. hinzugefügt ändern geprüft .next() das Kontrollkästchen zu finden, die neben den Knopf

Answer 2

A vereinfachte Lösung:

$("#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>

Oder noch kürzer angesichts wiederholter Code Entfernen

$("[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(); 
});