Eightleven Eightleven - 5 months ago 11
Javascript Question

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

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.


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

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();
});
Comments