带有字体真棒和自举的样式复选框

Question

我正在尝试使用引导字体很棒的字体来设置复选框样式。 我正在使用两个字体真棒图标fa-circle-thin和fa-check-circle 。

在鼠标悬停时，应基于选中/未选中状态切换类，并在单击复选框时调用javascript函数。

如果特定模型属性为False，则尝试将模型绑定为列表时，应应用“ fa-circle-thin”，如果选中它，则应应用“ fa-check-circle”。

任何帮助对此表示赞赏！

Answer 1

看，这是否可以帮助您。 我已经尝试过您的jsbin代码。 HTML：

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

</head>
<body>
  <div class="divclass">
    <i class="fa fa-circle-o"></i>
  </div>
</body>
</html>

CSS：

.divclass{
  font-size:5em;
  color:grey;
  cursor:pointer;
}

JS：

$('.divclass').click(function(){

  var ele = $(this).find('i');
  if($(ele).hasClass('fa-circle-o')){
     $(ele).removeClass('fa-circle-o');
    $(ele).addClass('fa-check-circle');
  }else{
    $(ele).addClass('fa-circle-o');
    $(ele).removeClass('fa-check-circle');

  }
});

Answer 2

我希望这个能帮上忙：

HTML：

<ul>
  <li>
    <label>
      <input type="checkbox" checked /><i class="icon-fixed-width icon-check"></i> One
    </label>
  </li>
  <li>
    <label>
      <input type="checkbox" checked /><i class="icon-fixed-width icon-check"></i> Two
    </label>
  </li>
  <li>
    <label>
      <input type="checkbox" checked /><i class="icon-fixed-width icon-check"></i> Three
    </label>
  </li>
</ul>

CSS：

[type=checkbox] {
  display: none;
}

label {
  cursor: pointer;
}

[class*=icon-].icon-fixed-width {
  text-align: left;
}

JavaScript：

$("[type=checkbox]").change(function() {
  $checkbox = $(this)
  $icon = $checkbox.siblings("[class*=icon-]")

  checked = $checkbox.is(":checked")

  $icon.toggleClass('icon-check', checked)
    .toggleClass('icon-check-empty', !checked)
});

注意：fontawesome应该包含在页面上。 （font-awesome.css / font-awesome.min.css）

JSFiddle： https ://jsfiddle.net/nikdtu/mLuubpaq/

Answer 3

我在这里创建了一个JS bin。 该复选框是隐藏的，因此就好像字体超赞图标是该复选框一样。 您可以取消隐藏该复选框以查看效果。

的HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>

  <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
  <div class="divclass">
    <i class="fa fa-circle-o">
      <input id='chk1' type='checkbox' style='display:none'/>
    </i>
  </div>

</body>
</html>

的CSS

.divclass{
  font-size:5em;
  color:grey;
  cursor:pointer;
}

.divclass:hover .fa-circle-o:before{
  content:"\f05d";
  color:green;
  opacity:0.4;
}

的JavaScript

$(function(){
  $(".divclass").hover(function(){
    //Execute code on hover in
    $("#chk1").prop('checked', true);
  },function(){
    //Execute code on hover out
    $("#chk1").prop('checked', false);
  });

  //Below call back is used on click of the checkbox
  $(".divclass").click(function(){
    alert("checkbox clicked");
  });
})

带有字体真棒和自举的样式复选框

问题描述

3 个解决方案

解决方案1
1 2016-12-28 04:48:13

解决方案2
1 已采纳 2016-12-28 04:49:21

解决方案3
0 2016-12-28 05:00:41

带有字体真棒和自举的样式复选框

问题描述

3 个解决方案

解决方案1 1 2016-12-28 04:48:13

解决方案2 1 已采纳 2016-12-28 04:49:21

解决方案3 0 2016-12-28 05:00:41

解决方案1
1 2016-12-28 04:48:13

解决方案2
1 已采纳 2016-12-28 04:49:21

解决方案3
0 2016-12-28 05:00:41