jQuery addClass example

Change class name on click in jQuery

by Ufuk Ozdemir

HTML

<table class="table table-sm"> <thead> <tr> <th></th> <th> <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" id="goster-tumu"> <label class="custom-control-label" for="goster-tumu">Göster</label> </div> </th> <th> <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" id="yeni-tumu"> <label class="custom-control-label" for="yeni-tumu">Yeni</label> </div> </th> <th> <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" id="degistir-tumu"> <label class="custom-control-label" for="degistir-tumu">Değiştir</label> </div> </th> <th> <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" id="gecmis-tumu"> <label class="custom-control-label" for="gecmis-tumu">Geçmiş</label> </div> </th> <th> <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" id="sil-tumu"> <label class="custom-control-label" for="sil-tumu">Sil</label> </div> </th> <th> <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" id="hepsi"> <label class="custom-control-label" for="hepsi">Hepsi</label> </div> </th> </tr> </thead> <tbody> <tr> <td><strong>Hasta Modülü</strong></td> <td> <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input goster" id="hasta_modul" value="1" name="hasta_modul" checked=""> <label class="custom-control-label" for="hasta_modul"></label> </div> </td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr><tr> <td>Hasta » Hasta</td> <td> <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input goster" id="hasta_goster" value="1" name="hasta_goster" checked=""> <label class="custom-control-label" for="hasta_goster"></label> </div> </td> <td> <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input yeni"...

CSS

body {
  padding: 20px;
  font-family: Helvetica;
}
table tr{
    padding-bottom:20px
}

JavaScript

$("#goster-tumu").click(function() {
    $(this).closest('table').find('td input.goster').prop('checked', this.checked);
});

$("#yeni-tumu").click(function() {
    $(this).closest('table').find('td input.yeni').prop('checked', this.checked);
});

$("#degistir-tumu").click(function() {
    $(this).closest('table').find('td input.degistir').prop('checked', this.checked);
});

$("#gecmis-tumu").click(function() {
    $(this).closest('table').find('td input.gecmis').prop('checked', this.checked);
});

$("#sil-tumu").click(function() {
    $(this).closest('table').find('td input.sil').prop('checked', this.checked);
});

$('#hepsi').click(function () {
    $(this).closest('table').find('input:checkbox').prop('checked', this.checked);
});