单击然后检查时如何设置字体真棒检查图标[关闭]答案

【问题标题】：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> 内
谢谢，但是我是新人，你能告诉我我在做什么
请尊重其他用户 - 如果您懒得输入“请”这个词，这说明了很多。

标签： jquery html css fonts

【解决方案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>

【讨论】：