入力ボタンでチェックボックスをオフにすることはできません。私のチェックボックスには何が問題なのですか？

Question

コントロールの下にあるすべてのjavascriptと統合されたチェックボックスをクリックすると、選択したすべてのチェックボックスがチェックされ、チェックボックスをオフにすると、その逆のチェックボックスがオンになります。

ここに問題があります。 1.ボタンをチェックボックスに統合します。ボタンをクリックするとチェックボックスがオンになりますが、他のチェックボックスはチェックされません。

2. もう一度クリックしてチェックしないともう一度問題が発生します。

私のコードに何が問題なのですか？それは私

のために懸命だ。ここに私のhtmlコードは次のとおりです。

<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> 

は、ここに私のjavascriptのコードです：

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

これは私のバイオリンです：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. チェックボックスを使用している場合、私はボタンでclick
2. よりchangeイベントを好むcheckallを変更するにはクリックして手動ボタン

Answer 2

Aの横にあるチェックボックスを見つけるに追加.next()イベント

を変更するには、ステータスコールをチェックします簡略化されたソリューション：

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

、あるいは短いありがとう@guradio繰り返しコード

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