Remove yes tick from the checkbox

function togchq3chn(x) {

  for (i = 1; i < 10; i++) {
    var k = "kd" + i;
    var c = "cd" + i;

    if (x.id == k) {
      document.getElementById(c).style.display = "block";
    }
  }
}
.chqsqr {
  width: 25px;
  height: 25px;
  border: 1px solid rgb(180, 180, 180);
  border-radius: 2px;
}

.shcursor {
  cursor: pointer;
}

.inlineblock {
  display: inline-block !important;
}

.bluefont {
  color: rgb(0, 98, 167) !important;
}

.f17 {
  font-size: 1.7em !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE HTML>
<html>

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" />
  <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
</head>

<body>
  <div class="col-md-1">
    <div class="chqsqr shcursor inlineblock" id="kd1" onclick="togchq3chn(this)">
      <i class="fas fa-check" id="cd1" style="position: relative; display:none; top:-2px; left: 2px; "></i>
    </div>
  </div>
  <div class="col-md-1">
    <div class="chqsqr shcursor inlineblock" id="kd2" onclick="togchq3chn(this)">
      <i class="fas fa-check" id="cd2" style="position: relative; display:none; top:-2px; left: 2px; "></i>

    </div>
  </div>
  <div class="col-md-1">
    <div class="chqsqr shcursor inlineblock" id="kd3" onclick="togchq3chn(this)">
      <i class="fas fa-check" id="cd3" style="position: relative; display:none; top:-2px; left: 2px; "></i>
    </div>
  </div>
</body>

</html>

Once i click on the check box it get selected but if i again click on the same check box the yes tick is not getting disabled.

I try that else section else{document.getElementById(c).style.display = “none”;} but when i do this code. at time one checkbox i can get selected. this will work like a toggled.

Requirement: On the checkbox if i click again the yes tick will get respective checkbox yest tick disappeared.

Answer

You don’t need to give one unique ID to each <div> and to each <i>. You don’t need to loop 10 times on click, generate IDs, test if each ID matches the element you clicked, then show/hide another element with a composed ID.

What you are trying to do can be done with a simple toggle() on click. (And one jQuery!)

$(".chqsqr").click(function() {
  $(this).find("i").toggle()
});
.chqsqr {
  width: 25px;
  height: 25px;
  border: 1px solid rgb(180, 180, 180);
  border-radius: 2px;
}

.shcursor {
  cursor: pointer;
}

.inlineblock {
  display: inline-block !important;
}

.bluefont {
  color: rgb(0, 98, 167) !important;
}

.f17 {
  font-size: 1.7em !important;
}

i.fas {
  position: relative;
  display: none;
  top: -2px;
  left: 2px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" />
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

<div class="col-md-1">
  <div class="chqsqr shcursor inlineblock">
    <i class="fas fa-check"></i>
  </div>
</div>
<div class="col-md-1">
  <div class="chqsqr shcursor inlineblock">
    <i class="fas fa-check"></i>
  </div>
</div>
<div class="col-md-1">
  <div class="chqsqr shcursor inlineblock" id="kd3">
    <i class="fas fa-check" ></i>
  </div>
</div>