造型複選框與字體真棒和引導

-1

我想風格複選框使用字體真棒與引導。我正在使用兩個字體棒圖fa-circle-thin和fa-check-circle。造型複選框與字體真棒和引導

在鼠標懸停時，它應該基於它被選中/取消選中，並在點擊複選框時觸發類。javascript函數應該被調用。

當試圖將模型綁定爲列表時，如果特定模型屬性爲False，那麼應該應用「fa-circle-thin」，如果選中了，則應該應用「fa-check-circle」。

對此有任何幫助表示讚賞！

來源

2016-12-28 Rohit

如果你創建了一個的jsfiddle或somethi它會更有幫助類似於顯示你的嘗試。 – Karthik

我已經嘗試從這http://output.jsbin.com/noqiwi/ – Rohit

您的jsbin代碼既沒有複選框，也沒有任何JavaScript功能 – Deep

我希望這將有助於：

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：https://jsfiddle.net/nikdtu/mLuubpaq/

來源

2016-12-28 04:49:21

這可以在鼠標懸停上完成嗎？如果未選中，則鼠標懸停顯示選中的圖標，反之亦然 – 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'); 

    } 
});

來源

2016-12-28 04:48:13

我已經創建了一個JS倉here。這個複選框是隱藏的，所以它就好像字體真棒圖標是複選框。您可以取消隱藏複選框以查看效果。

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

來源

2016-12-28 05:00:41 Karthik

造型複選框與字體真棒和引導

回答

相關問題