从复选框中删除是勾号答案

【问题标题】：Remove yes tick from the checkbox从复选框中删除是勾号
【发布时间】：2021-12-07 01:47:43
【问题描述】：

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>

一旦我点击复选框，它就会被选中，但如果我再次点击同一个复选框，yes 勾号不会被禁用。

我尝试其他部分 else{document.getElementById(c).style.display = "none";} 但是当我执行此代码时。有时我可以选择一个复选框。这将像切换一样工作。

要求：在复选框上，如果我再次点击是勾号将得到相应的复选框是勾号消失。

【问题讨论】：

使用复选框输入类型应该可以正常工作。为什么你需要一个脚本？
您在两个不同的版本（2.1.3 和 1.12.4）中加载了两次 jQuery，之后仍然使用 document.getElementById 而不是 jQuery。另外，运行你的 sn-p 会立即显示Script error，可能是因为你有<script src="">

标签： javascript html css bootstrap-4

【解决方案1】：

您无需为每个<div> 和每个<i> 提供一个唯一ID。您无需在点击时循环 10 次、生成 ID、测试每个 ID 是否与您点击的元素匹配，然后显示/隐藏具有组合 ID 的另一个元素。

您想要做的事情可以通过点击一个简单的toggle() 来完成。（还有一个 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>

【讨论】：

【解决方案2】：

如果我理解你的问题，那么你想要这样的东西吗？

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>

【讨论】：