单击然后检查时如何设置字体真棒检查图标[关闭]
Posted
技术标签:
【中文标题】单击然后检查时如何设置字体真棒检查图标[关闭]【英文标题】：how to set font-awesome check icon when click then check [closed] 【发布时间】：2018-05-21 09:05:57 【问题描述】：我想设置字体真棒检查图标，当我点击它然后它检查当我再次点击它取消选中这是怎么可能的......我不使用复选框所以请在这个字体真棒检查中告诉我。 ...如果它可能与 jquery 然后告诉我 plzz 它是如何完成的.. 我的代码....
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title> </title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
<ul>
<li>
<label> first
<i class="fa fa-check-square" aria-hidden="true"></i>
</label>
</li>
<li>
<label> second
<i class="fa fa-check-square" aria-hidden="true"></i>
</label>
</li>
<li>
<label> third
<i class="fa fa-check-square" aria-hidden="true"></i>
</label>
</li>
</ul>
</body>
</html>【问题讨论】：
有可能，这些是你需要研究的方法：api.jquery.com/click和api.jquery.com/toggleclass。另请注意，您应该只包含一次 jQuery，并且您的第一个<script> 标记应该在文档的 <head> 内
谢谢，但是我是新人，你能告诉我我在做什么
请尊重其他用户 - 如果您懒得输入“请”这个词，这说明了很多。
【参考方案1】：
快乐编码:)
$('li').click(function()
$(this).find('label i').toggleClass('hidden');
);.hidden
display:none !important;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title> </title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
<ul>
<li>
<label> first
<i class="fa fa-check-square hidden" aria-hidden="true"></i>
</label>
</li>
<li>
<label> second
<i class="fa fa-check-square hidden" aria-hidden="true"></i>
</label>
</li>
<li>
<label> third
<i class="fa fa-check-square hidden" aria-hidden="true"></i>
</label>
</li>
</ul>
</body>
</html>【讨论】：
【参考方案2】：如果您只想让复选框切换：
<!DOCTYPE html>
<html>
<head>
<title> </title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
</head>
<body>
<ul>
<li>
<label> first
<i class="fa fa-check-square" aria-hidden="true"></i>
</label>
</li>
<li>
<label> second
<i class="fa fa-check-square" aria-hidden="true"></i>
</label>
</li>
<li>
<label> third
<i class="fa fa-check-square" aria-hidden="true"></i>
</label>
</li>
</ul>
</body>
<script type="text/javascript">
function asign_click_functions()
$(".fa-check-square").click(function()
$(this).removeClass("fa-check-square").addClass("fa-check-square-o");
asign_click_functions();
);
$(".fa-check-square-o").click(function()
$(this).removeClass("fa-check-square-o").addClass("fa-check-square");
asign_click_functions();
);
;
asign_click_functions();
</script>
</html>事情是在动作之后重新分配点击功能。在这种情况下，如果简单地为每个复选框重新签名，但也可以以更优雅的方式完成。
【讨论】：
【参考方案3】：$("#box1").click(function()
$("#box1").css("display", "none");
$("#check1").css("display", "block");
);
$("#check1").click(function()
$("#box1").css("display", "block");
$("#check1").css("display", "none");
);
$("#box2").click(function()
$("#box2").css("display", "none");
$("#check2").css("display", "block");
);
$("#check2").click(function()
$("#box2").css("display", "block");
$("#check2").css("display", "none");
);
$("#box3").click(function()
$("#box3").css("display", "none");
$("#check3").css("display", "block");
);
$("#check3").click(function()
$("#box3").css("display", "block");
$("#check3").css("display", "none");
);<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"><script type="text/javascript" src="js/jquery.js"></script><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"><style>#check1,
#check2,
#check3
display: none;
</style><!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script type="text/javascript" src="js/jquery.js"></script>
<style>
#check1, #check2, #check3
display: none;
</style>
</head>
<body>
<ul>
<li>
<label>
first
<i class="fa fa-square-o" aria-hidden="true" id="box1"></i>
<i class="fa fa-check-square" aria-hidden="true" id="check1"></i>
</label>
</li>
<li>
<label>
second
<i class="fa fa-square-o" aria-hidden="true" id="box2"></i>
<i class="fa fa-check-square" aria-hidden="true" id="check2"></i>
</label>
</li>
<li>
<label>
third
<i class="fa fa-square-o" aria-hidden="true" id="box3"></i>
<i class="fa fa-check-square" aria-hidden="true" id="check3"></i>
</label>
</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>
<script>
$("#box1").click(function ()
$("#box1").css("display", "none");
$("#check1").css("display", "block");
);
$("#check1").click(function ()
$("#box1").css("display", "block");
$("#check1").css("display", "none");
);
$("#box2").click(function ()
$("#box2").css("display", "none");
$("#check2").css("display", "block");
);
$("#check2").click(function ()
$("#box2").css("display", "block");
$("#check2").css("display", "none");
);
$("#box3").click(function ()
$("#box3").css("display", "none");
$("#check3").css("display", "block");
);
$("#check3").click(function ()
$("#box3").css("display", "block");
$("#check3").css("display", "none");
);
</script>
</html>【讨论】：
以上是关于单击然后检查时如何设置字体真棒检查图标[关闭]的主要内容，如果未能解决你的问题，请参考以下文章