无法使用输入按钮取消选中复选框，以及我的复选框有什么问题？

Question

当我点击我已经集成了javascript的复选框时，我选中的所有复选框都被选中，反之亦然。

问题出在这里。 1.我将按钮与复选框集成，当我单击按钮时，复选框已选中，但是其他复选框无法检查。

1. 第二个问题，再次点击以取消选中它无效。

我的代码出了什么问题？这对我来说太难了

这是我的HTML代码：

/opt/tomcat/.jenkins/secrets/initialAdminPassword

这是我的javascript代码：

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

这是我的小提琴：JSFIDDLE

Answer 1

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

1. 使用复选框时我更喜欢change事件而不是click
2. 在按钮上单击以更改checkall已检查状态调用手动更改事件
3. 添加.next()以找到按钮旁边的复选框

Answer 2

简化解决方案：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

考虑删除重复的代码，甚至更短

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