Question

我想设置font-awesome检查图标，当ic点击它然后检查当我再次点击它取消选中这是怎么可能....我不使用复选框所以plz告诉我在这个字体 - 真棒检查。 ...如果它可能与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>

Answer 1

快乐编码：）

＆＃13;

$('li').click(function() {
$(this).find('label i').toggleClass('hidden');
});

＆＃13;

.hidden{
display:none !important;
}

＆＃13;

<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>

＆＃13;

Answer 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>

事情是在动作后重新设置点击功能。在这种情况下，如果只是为每个复选框重新分配，但也可以更优雅的方式完成。

Answer 3

＆＃13;

$("#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");

});

＆＃13;

<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>

＆＃13;

<!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>

＆＃13;

单击然后检查时如何设置font-awesome检查图标

3 个答案: