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

Question

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.

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

@guradio i have update my jsfiddle demo, can you help me, first click can't change class, but thereafter is fine — Rofi Fathurrohman
– Rofi Fathurrohman, Commented Jun 30, 2016 at 6:04

guradio · Accepted Answer · 2016-06-30 05:42:43Z

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

When using checkbox i prefer change event than click
On button click to change checkall checked status call manually change event
Added .next() to find the checkbox that is next the button

i have update my jsfiddle demo, can you help me, first click can't change class, but thereafter is fine

Rayon · Accepted Answer · 2016-06-30 05:59:56Z

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

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related