<!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>一旦我點擊復選框，它就會被選中，但如果我再次點擊同一個復選框，是的勾號不會被禁用。
我嘗試 else 部分 else{document.getElementById(c).style.display = "none";} 但是當我執行此代碼時。在一個復選框時，我可以被選中。這將像切換一樣作業。
要求：在復選框上，如果我再次單擊是勾選將使相應的復選框是勾選消失。
uj5u.com熱心網友回復：
如果我理解你的問題，那么你想要這樣的東西？
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>uj5u.com熱心網友回復：
您不需要為每個<div>和每個<i>. 您無需在單擊時回圈 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>轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/326574.html
標籤：javascript html css bootstrap-4
下一篇：根據條件添加或洗掉類