私はブートストラップとawesomeフォントを使用してチェックボックスをスタイルしようとしています。私は2つのフォント素晴らしいアイコンfa-circle-thinとfa-check-circleを使用しています。スタイリングチェックボックスとフォントの素晴らしいとブートストラップ
マウスを動かすと、それに基づいてクラスを切り替える必要があります。チェックボックスをオンまたはオフにし、チェックボックスをオンにするとjavascript関数が呼び出されます。
特定のモデルプロパティがFalseの場合、モデルをリストとしてバインドしようとすると 'fa-circle-thin'が適用され、チェックされていれば 'fa-check-circle'が適用されます。
この点に関するお役に立ちましたか？
：
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がページに含まれるべきです。 （フォント-awesome.css /フォント-awesome.min.css）
JSFiddle：私はJSビンhereを作成しているhttps://jsfiddle.net/nikdtu/mLuubpaq/
これはマウスのホバーで行うことができますか？チェックしていない場合はマウスのホバーでチェックしたアイコンを表示し、逆の場合は – Rohit
はい、ホバーとマウスオーバーのハンドラーを少し確認してください。 –
ここをクリックしてください。私はあなたの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');
}
});
。チェックボックスは非表示になっているので、フォントの素晴らしいアイコンがチェックボックスのように表示されます。チェックボックスを表示して、効果を確認することができます。
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");
});
})
あなたはjsfiddleやsomethiを作成した場合、それはより便利になりますあなたが試したことを示すために似ています。 – Karthik
私はこれから試しましたhttp://output.jsbin.com/noqiwi/ – Rohit
あなたのjsbinコードにはチェックボックスが付いておらず、javascript機能もありません – Deep