CODEWITHSUNDEEP
jqueryhtmlcss
Dolorosa
Dolorosa

Reputation: 573

Uncheck checkbox in table with property "checked"

I'm creating a table with checkboxes, and I want to put the states (check/uncheck) as a property in checkbox input html class. So far I can only check it but I can't uncheck it because the line

$(this).find(".checkbox-input").prop("checked", "checked");

doesn't seem to set anything to my checkbox input.

Did I do something wrong? I'm new to this since I'm not a frontend engineer. Any help appreciated!

$(".checkbox-action").click(function() {
  if (!$(this).find(".checkbox-input").prop("checked")) {
    $(this).find("i").css({"display": "inline-block"});
    $(this).find(".checkbox").addClass("checkbox-checked");  
    if ($(this).prop("tagName").toLowerCase() == "td") {
      $(this).parent().addClass("selected-bg");  
    }
    else {
      $("table").find("i").css({"display": "inline-block"});
      $("table").find(".checkbox").addClass("checkbox-checked"); 
      $("tr").addClass("selected-bg"); 
      $(".first-row").removeClass("selected-bg"); 
    }
    $(this).find(".checkbox-input").prop("checked", "checked");
  }
  else {
    if ($(this).prop("tagName").toLowerCase() == "td") {
      $(this).parent().removeClass("selected-bg");  
    }
  }
});
table {
  border-spacing:0;
  border-collapse: collapse;
  font-size: 13px;
  display: block;
  overflow-x: scroll !important;
  white-space: nowrap;
  color: #333;
}

tr.first-row {
  border-bottom: solid 2px #c4c4c4;
}

td, th {
  text-align: left;
  height: 40px;
  padding-left: 12px;
  padding-right: 12px;
}

th {
  font-weight: 700;
}

.alternate-bg {
  background-color: #f8f8f8; 
}

.selected-bg {
  background-color: #CAF1FF;
}

td.icon {
  text-align: center; 
}

i {
  font-size: 14px;
  color: #333;
  cursor: pointer;
}

.icon i:hover {
  color: #00c983;
}

.fa-sort {
  margin-left: 8px;
}

.money {
  text-align: right;
}

.history a {
  color: #0099ff;
  text-decoration: underline;
}

button {
  height: 32px;
  width: 48px;
  margin-right: 4px;
  border-radius: 3px;
  border: none;
  box-shadow: 0px 3px 6px 0 rgba(0,0,0,0.15);
}

button i {
  color: #fff;
  line-height: 20px !important;
}

.green {
  background-color: #00c983;
}

.red {
  background-color: #FF7979;
}

.table-action {
  padding-left: 6px;
  padding-right: 6px;
  text-align: center;
}

.table-action input {
  opacity: 0;
  position: relative;
}

.checkbox {
  width: 16px;
  height: 16px;
  border: solid 1px #c4c4c4;
  border-radius: 2px;
  display: inline-block;
  margin-left: -16px;
  margin-top: 6px;
  cursor: pointer;
}

.checkbox-checked {
  border: solid 1px #00c983;
}

.checkbox-input {
  cursor: pointer;
}

.checkbox i {
  color: #00c983;
  display: none;
}

.checkbox i:hover {
  color: #00c983;
}

th:first-child,
td:first-child {
  padding-left: 24px;
  padding-right: 10px;
}

.table-action-last {
  padding-right: 16px;
}

::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background-color: rgba(0,0,0,.25);
  -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}

Upvotes: 0

Views: 183

Answers (2)

Ziregbe Otee
Ziregbe Otee

Reputation: 554

Your Html needs to be updated a little see below:

  1. Change the type of the checkboxes to checkbox instead of checkbox-input.
  2. Give an id to the top checkbox that does all the toggles. e.g i named it chkBoxMain
  3. Give the checkboxes you wish to toggle a class named checkbox-input.

  4. Take a look at my jquery below.

    <table id="listTable">
    <tr class="first-row">
        <th class="table-action checkbox-action"><input type="checkbox" id="chkBoxMain" checked><span class="checkbox"><i class="fas fa-check"></i></span></th>
        <th class="table-action">Edit</th>
        <th class="table-action table-action-last">View</th>
        <th>Request No.<i class="fas fa-sort"></i></th>
        <th>Employee ID<i class="fas fa-sort"></i></th>
        <th>Employee Name<i class="fas fa-sort"></i></th>
        <th>Claim For<i class="fas fa-sort"></i></th>
        <th>Family Member<i class="fas fa-sort"></i></th>
        <th>Item<i class="fas fa-sort"></i></th>
        <th>Request Date<i class="fas fa-sort"></i></th>
        <th>Receipt Date<i class="fas fa-sort"></i></th>
        <th>Total Claim</th>
        <th>History</th>
    </tr>
    <tr class="alternate-bg">
        <td class="table-action checkbox-action"><input type="checkbox" class="checkbox-input" checked><span class="checkbox"><i class="fas fa-check"></i></span></td>
        <td class="icon table-action"><i class="fas fa-pencil-alt"></i></td>
        <td class="icon table-action table-action-last"><i class="fas fa-eye"></i></td>
        <td>REI/TRAVEL/04/005</td>
        <td>EMP004</td>
        <td>I Putu Yudi Haryasa</td>
        <td>Employee</td>
        <td>-</td>
        <td>Transport</td>
        <td>4 May 2018</td>
        <td>1 May 2018</td>
        <td class="money">300,000.00</td>
        <td class="history"><a href="#">See detail</a></td>
    </tr>
    <tr>
        <td class="table-action checkbox-action"><input type="checkbox" class="checkbox-input" checked><span class="checkbox"><i class="fas fa-check"></i></span></td>
        <td class="icon table-action"><i class="fas fa-pencil-alt"></i></td>
        <td class="icon table-action table-action-last"><i class="fas fa-eye"></i></td>
        <td>REI/MEDICAL/04/004</td>
        <td>EMP005</td>
        <td>Daniel Giovanni Gunawan</td>
        <td>Employee</td>
        <td>-</td>
        <td>Kacamata</td>
        <td>4 May 2018</td>
        <td>25 Apr 2018</td>
        <td class="money">550,000.00</td>
        <td class="history"><a href="#">See detail</a></td>
    </tr>
    <tr class="alternate-bg">
        <td class="table-action checkbox-action"><input type="checkbox" class="checkbox-input" checked><span class="checkbox"><i class="fas fa-check"></i></span></td>
        <td class="icon table-action"><i class="fas fa-pencil-alt"></i></td>
        <td class="icon table-action table-action-last"><i class="fas fa-eye"></i></td>
        <td>REI/MEDICAL/04/003</td>
        <td>EMP006</td>
        <td>Muhammad Nadzeri Munawar</td>
        <td>Family</td>
        <td>Nadzira - First Child</td>
        <td>Rawat Inap</td>
        <td>3 May 2018</td>
        <td>28 Apr 2018</td>
        <td class="money">4,500,000.00</td>
        <td class="history"><a href="#">See detail</a></td>
    </tr>
    <tr>
        <td class="table-action checkbox-action"><input type="checkbox" class="checkbox-input" checked><span class="checkbox"><i class="fas fa-check"></i></span></td>
        <td class="icon table-action"><i class="fas fa-pencil-alt"></i></td>
        <td class="icon table-action table-action-last"><i class="fas fa-eye"></i></td>
        <td>REI/MEDICAL/03/002</td>
        <td>EMP007</td>
        <td>Glenn Kristanto</td>
        <td>Family</td>
        <td>Kristanti - First Child</td>
        <td>Rawat Jalan</td>
        <td>2 May 2018</td>
        <td>25 Apr 2018</td>
        <td class="money">3,000,000.00</td>
        <td class="history"><a href="#">See detail</a></td>
    </tr>
    <tr class="alternate-bg">
        <td class="table-action checkbox-action"><input type="checkbox" class="checkbox-input" checked><span class="checkbox"><i class="fas fa-check"></i></span></td>
        <td class="icon table-action"><i class="fas fa-pencil-alt"></i></td>
        <td class="icon table-action table-action-last"><i class="fas fa-eye"></i></td>
        <td>REI/TRAVEL/03/001</td>
        <td>EMP008</td>
        <td>Hendryanto Fudiko</td>
        <td>Employee</td>
        <td>-</td>
        <td>Transport</td>
        <td>2 May 2018</td>
        <td>23 Apr 2018</td>
        <td class="money">150,000.00</td>
        <td class="history"><a href="#">See detail</a></td>
    </tr>
</table>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>

    $(document).ready(function () {


        ToggleChecked();

    });

    function ToggleChecked() {




        $('#chkBoxMain').click(function () {

            var checked = $("#chkBoxMain").prop("checked");

            if(checked == true){


                $(".checkbox-input").each(function(){

                    $(this).prop("checked",true);
                    //put your styles here
                })


            }
            else {

                $(".checkbox-input").each(function () {

                    $(this).prop("checked", false);

                    //put your styles here
                })


            }

        });




    }




</script>

Upvotes: 1

Neeraj Pathak
Neeraj Pathak

Reputation: 759

$(".checkbox-action").click(function() {
console.log($(this).find('input[type="checkbox-input"]').prop("checked"))
  if (!$(this).find('input[type="checkbox-input"]').prop("checked")) {
  
    $(this).find("i").css({"display": "inline-block"});
    $(this).find(".checkbox").addClass("checkbox-checked");
    
    if ($(this).prop("tagName").toLowerCase() == "td") {
      $(this).parent().addClass("selected-bg");  
    }
    else {
      $("table").find("i").css({"display": "inline-block"});
      $("table").find(".checkbox").removeClass("checkbox-checked");
      
      $("tr").addClass("selected-bg"); 
      $(".first-row").removeClass("selected-bg"); 
    }
    $(this).find('input[type="checkbox-input"]').prop("checked", true);
  }
  else {
  $(this).find('input[type="checkbox-input"]').prop("checked", false);
   
    $(this).find("i").css({"display": "none"});
    $(this).find(".checkbox").removeClass("checkbox-checked");
    
    if ($(this).prop("tagName").toLowerCase() == "td") {
      $(this).parent().removeClass("selected-bg");  
    }
    else {
      $("table").find('span.checkbox').find("i").css({"display": "none"});
      $("table").find(".checkbox").removeClass("checkbox-checked");
      
      $("tr").removeClass("selected-bg"); 
      $(".first-row").removeClass("selected-bg"); 
    }
  }
});
table {
  border-spacing:0;
  border-collapse: collapse;
  font-size: 13px;
  display: block;
  overflow-x: scroll !important;
  white-space: nowrap;
  color: #333;
}

tr.first-row {
  border-bottom: solid 2px #c4c4c4;
}

td, th {
  text-align: left;
  height: 40px;
  padding-left: 12px;
  padding-right: 12px;
}

th {
  font-weight: 700;
}

.alternate-bg {
  background-color: #f8f8f8; 
}

.selected-bg {
  background-color: #CAF1FF;
}

td.icon {
  text-align: center; 
}

i {
  font-size: 14px;
  color: #333;
  cursor: pointer;
}

.icon i:hover {
  color: #00c983;
}

.fa-sort {
  margin-left: 8px;
}

.money {
  text-align: right;
}

.history a {
  color: #0099ff;
  text-decoration: underline;
}

button {
  height: 32px;
  width: 48px;
  margin-right: 4px;
  border-radius: 3px;
  border: none;
  box-shadow: 0px 3px 6px 0 rgba(0,0,0,0.15);
}

button i {
  color: #fff;
  line-height: 20px !important;
}

.green {
  background-color: #00c983;
}

.red {
  background-color: #FF7979;
}

.table-action {
  padding-left: 6px;
  padding-right: 6px;
  text-align: center;
}

.table-action input {
  opacity: 0;
  position: relative;
}

.checkbox {
  width: 16px;
  height: 16px;
  border: solid 1px #c4c4c4;
  border-radius: 2px;
  display: inline-block;
  margin-left: -16px;
  margin-top: 6px;
  cursor: pointer;
}

.checkbox-checked {
  border: solid 1px #00c983;
}

.checkbox-input {
  cursor: pointer;
}

.checkbox i {
  color: #00c983;
  display: none;
}

.checkbox i:hover {
  color: #00c983;
}

th:first-child,
td:first-child {
  padding-left: 24px;
  padding-right: 10px;
}

.table-action-last {
  padding-right: 16px;
}

::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background-color: rgba(0,0,0,.25);
  -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.11/css/all.css" integrity="sha384-p2jx59pefphTFIpeqCcISO9MdVfIm4pNnsL08A6v5vaQc4owkQqxMV8kg4Yvhaw/" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" rel="stylesheet">

<table>
  <tr class="first-row">
    <th class="table-action checkbox-action"><input type="checkbox-input"><span class="checkbox"><i class="fas fa-check"></i></span></th>
    <th class="table-action">Edit</th>
    <th class="table-action table-action-last">View</th>
    <th>Request No.<i class="fas fa-sort"></i></th> 
    <th>Employee ID<i class="fas fa-sort"></i></th> 
    <th>Employee Name<i class="fas fa-sort"></i></th> 
    <th>Claim For<i class="fas fa-sort"></i></th> 
    <th>Family Member<i class="fas fa-sort"></i></th> 
    <th>Item<i class="fas fa-sort"></i></th> 
    <th>Request Date<i class="fas fa-sort"></i></th> 
    <th>Receipt Date<i class="fas fa-sort"></i></th> 
    <th>Total Claim</th> 
    <th>History</th> 
  </tr>
  <tr class="alternate-bg">
    <td class="table-action checkbox-action"><input type="checkbox-input"><span class="checkbox"><i class="fas fa-check"></i></span></td>
    <td class="icon table-action"><i class="fas fa-pencil-alt"></i></td>
    <td class="icon table-action table-action-last"><i class="fas fa-eye"></i></td>
    <td>REI/TRAVEL/04/005</td> 
    <td>EMP004</td>
    <td>I Putu Yudi Haryasa</td>
    <td>Employee</td>
    <td>-</td>
    <td>Transport</td>
    <td>4 May 2018</td>
    <td>1 May 2018</td>
    <td class="money">300,000.00</td>
    <td class="history"><a href="#">See detail</a></td>
  </tr>
  <tr>
    <td class="table-action checkbox-action"><input type="checkbox-input" ><span class="checkbox"><i class="fas fa-check"></i></span></td>
    <td class="icon table-action"><i class="fas fa-pencil-alt"></i></td>
    <td class="icon table-action table-action-last"><i class="fas fa-eye"></i></td>
    <td>REI/MEDICAL/04/004</td>
    <td>EMP005</td>
    <td>Daniel Giovanni Gunawan</td>
    <td>Employee</td>
    <td>-</td>
    <td>Kacamata</td>
    <td>4 May 2018</td>
    <td>25 Apr 2018</td>
    <td class="money">550,000.00</td>
    <td class="history"><a href="#">See detail</a></td>
  </tr>
  <tr class="alternate-bg">
    <td class="table-action checkbox-action"><input type="checkbox-input"><span class="checkbox"><i class="fas fa-check"></i></span></td>
    <td class="icon table-action"><i class="fas fa-pencil-alt"></i></td>
    <td class="icon table-action table-action-last"><i class="fas fa-eye"></i></td>
    <td>REI/MEDICAL/04/003</td> 
    <td>EMP006</td>
    <td>Muhammad Nadzeri Munawar</td>
    <td>Family</td>
    <td>Nadzira - First Child</td>
    <td>Rawat Inap</td>
    <td>3 May 2018</td>
    <td>28 Apr 2018</td>
    <td class="money">4,500,000.00</td>
    <td class="history"><a href="#">See detail</a></td>
  </tr>
  <tr>
    <td class="table-action checkbox-action"><input type="checkbox-input"><span class="checkbox"><i class="fas fa-check"></i></span></td>
    <td class="icon table-action"><i class="fas fa-pencil-alt"></i></td>
    <td class="icon table-action table-action-last"><i class="fas fa-eye"></i></td>
    <td>REI/MEDICAL/03/002</td> 
    <td>EMP007</td>
    <td>Glenn Kristanto</td>
    <td>Family</td>
    <td>Kristanti - First Child</td>
    <td>Rawat Jalan</td>
    <td>2 May 2018</td>
    <td>25 Apr 2018</td>
    <td class="money">3,000,000.00</td>
    <td class="history"><a href="#">See detail</a></td>
  </tr>
  <tr class="alternate-bg">
    <td class="table-action checkbox-action"><input type="checkbox-input" ><span class="checkbox"><i class="fas fa-check"></i></span></td>
    <td class="icon table-action"><i class="fas fa-pencil-alt"></i></td>
    <td class="icon table-action table-action-last"><i class="fas fa-eye"></i></td>
    <td>REI/TRAVEL/03/001</td> 
    <td>EMP008</td>
    <td>Hendryanto Fudiko</td>
    <td>Employee</td>
    <td>-</td>
    <td>Transport</td>
    <td>2 May 2018</td>
    <td>23 Apr 2018</td>
    <td class="money">150,000.00</td>
    <td class="history"><a href="#">See detail</a></td>
  </tr>
</table>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

try this one. you wrong more things. check it own self

Upvotes: 2

Related Questions