Remove yes tick from the checkbox-CodePudding

<!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>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
 

<script src=""></script>

<script>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";                     
                   
               }             

       }
}</script>
<style>
.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;}
</style>
</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.

CodePudding user response：

If I understood your question then you wanted something like this?

function clickFunction(prop){
        var nameProp = document.getElementsByName(prop.name);
        var idProp = document.getElementById(prop.id);

        if (idProp.checked) {
          for(var i=0; i < nameProp.length; i  ){
                  nameProp[i].disabled = false;          
          } 
        }
          
    }

<tr><td><input type="checkbox" name="box" id="box1" value="1" tabIndex="1" onClick="clickFunction(this)">Test 1</td></tr>
    <tr><td><input type="checkbox" name="box" id="box2" value="1" tabIndex="1" onClick="clickFunction(this)">Test 2</td></tr>
    <tr><td><input type="checkbox" name="box" id="box3" value="1" tabIndex="1" onClick="clickFunction(this)">Test 3</td></tr>

CodePudding user response：

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>