javascript - 选中其他复选框时取消选中复选框

Question

我尝试了我的代码，但它并不总是有效，我放弃了。

你能帮我用我的代码在选中其他复选框时取消选中一个复选框吗？

这是我的代码:

JS代码:

$("#1 #checkAll").change(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").change(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).next('#checkAll')
    console.log($$.is(':checked'))
    if ($$.is(':checked')) {
        $(this).toggleClass('unchecked checked');
        $('#checkAll').prop('checked', false).change();
    } else {
        $(this).toggleClass('unchecked checked');
        $('#checkAll').prop('checked', true).change();
    }
})
$('#c2').on('click', function() {
    var $$ = $(this).next('#checkAll2')
    if ($$.is(':checked')) {
        $(this).toggleClass('unchecked checked');
        $('#checkAll2').prop('checked', false).change();
    } else {
        $(this).toggleClass('unchecked checked');
        $('#checkAll2').prop('checked', true).change();
    }
})

CSS 代码:

.unchecked {
    background: #1ba1e2; 
    border-color: #1ba1e2;
    height: 70px; 
    font-weight: bold;  
    margin-left:20px; 
    width:200px; 
    font-size: 30px;
}
.checked {
    background: #1c629b; 
    border-color: #1c629b;
    height: 70px; 
    font-weight: bold;  
    margin-left:20px; 
    width:200px; 
    font-size: 30px;
}

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" class="unchecked">1</button>
                    <input type="checkbox" name="checkAll" id="checkAll" style="display: none;">
                    <input type="checkbox" name="book1" id="book" value="book1">
                    <input type="checkbox" name="book2" id="book" value="book2">
                    <input type="checkbox" name="book3" id="book" value="book3">
                    <input type="checkbox" name="book4" id="book" value="book4">
                    <input type="checkbox" name="book5" id="book" value="book5">
                </td>
                </tr>
                <tr>
                <td id="2">
                    <button type="button" id="c2" class="unchecked">2</button>
                    <input type="checkbox" name="checkAll" id="checkAll2" style="display: none;">
                    <input type="checkbox" name="book1" id="book" value="book1">
                    <input type="checkbox" name="book2" id="book" value="book2">
                    <input type="checkbox" name="book3" id="book" value="book3">
                    <input type="checkbox" name="book4" id="book" value="book4">
                    <input type="checkbox" name="book5" id="book" value="book5">
                </td>
                </tr>
                </table>
                <input type="submit" name="sbm" value="Submit" class="button primary">
            </form>
        </div>
    </center>
</div>

这是我的 fiddle :JSFIDDLE

Answer 1

看看这个:

$("#1 #checkAll").change(function() {
      if ($("#1 #checkAll").is(':checked')) {
        $("#1 input[type=checkbox]").each(function() {
          $(this).prop("checked", true);
        });
        //When you check all #1 checkboxes, 
        //you uncheck all #2 checkboxes
        $("#2 input[type=checkbox]").each(function() {
          $(this).prop("checked", false);
        });
      } else {
        $("#1 input[type=checkbox]").each(function() {
          $(this).prop("checked", false);
        });
      }
    });
    $("#2 #checkAll2").change(function() {
      if ($("#2 #checkAll2").is(':checked')) {
        $("#2 input[type=checkbox]").each(function() {
          $(this).prop("checked", true);
        });
        //When you check all #2 checkboxes, 
        //you uncheck all #1 checkboxes
        $("#1 input[type=checkbox]").each(function() {
          $(this).prop("checked", false);
        });
      } else {
        $("#2 input[type=checkbox]").each(function() {
          $(this).prop("checked", false);
        });
      }
    });

    $('#c1').on('click', function() {
      var $$ = $(this).next('#checkAll')
      console.log($$.is(':checked'))
      if ($$.is(':checked')) {
        $(this).toggleClass('unchecked checked');
        $('#checkAll').prop('checked', false).change();
      } else {
        $(this).toggleClass('unchecked checked');
        //when you click #c1, you remove class checked to #c2
        $("#c2").removeClass('checked');
        $("#c2").addClass('unchecked');
        $('#checkAll').prop('checked', true).change();
      }
    })
    $('#c2').on('click', function() {
      var $$ = $(this).next('#checkAll2')
      if ($$.is(':checked')) {
        $(this).toggleClass('unchecked checked');
        $('#checkAll2').prop('checked', false).change();
      } else {
        $(this).toggleClass('unchecked checked');
        //when you click #c2, you remove class checked to #c1
        $("#c1").removeClass('checked');
        $("#c1").addClass('unchecked');
        $('#checkAll2').prop('checked', true).change();
      }
    })

.unchecked {
		background: #1ba1e2; border-color: #1ba1e2;
		 height: 70px; font-weight: bold;  margin-left:20px; width:200px; font-size: 30px;
		}
.checked {background: #1c629b; border-color: #1c629b;
		 height: 70px; font-weight: bold;  margin-left:20px; width:200px; font-size: 30px;
		}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.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" class="unchecked">
                1
              </button>
              <input type="checkbox" name="checkAll" id="checkAll" style="display: none;">
              <input type="checkbox" name="book1" id="book" value="book1">
              <input type="checkbox" name="book2" id="book" value="book2">
              <input type="checkbox" name="book3" id="book" value="book3">
              <input type="checkbox" name="book4" id="book" value="book4">
              <input type="checkbox" name="book5" id="book" value="book5">
            </td>
          </tr>
          <tr>
            <td id="2">
              <button type="button" id="c2" class="unchecked">
                2
              </button>
              <input type="checkbox" name="checkAll" id="checkAll2" style="display: none;">
              <input type="checkbox" name="book1" id="book" value="book1">
              <input type="checkbox" name="book2" id="book" value="book2">
              <input type="checkbox" name="book3" id="book" value="book3">
              <input type="checkbox" name="book4" id="book" value="book4">
              <input type="checkbox" name="book5" id="book" value="book5">
            </td>
          </tr>
        </table>
        <input type="submit" name="sbm" value="Submit" class="button primary">
      </form>
    </div>