Styling-Kontrollkästchen mit Schriftart super und Bootstrap

-1

Ich versuche, Kontrollkästchen mit Schriftart super mit Bootstrap style. Ich benutze zwei font awesome Icons fa-circle-thin und fa-check-circle.Styling-Kontrollkästchen mit Schriftart super und Bootstrap

Auf Maus-Hover sollte es Klasse wechseln basierend darauf ist aktiviert/deaktiviert und beim Klicken auf Kontrollkästchen JavaScript-Funktion sollte aufgerufen werden.

Wenn versucht wird, ein Modell als Liste zu binden, wenn eine bestimmte Modelleigenschaft False ist, sollte 'fa-circle-thin' angewendet werden und wenn es aktiviert ist, sollte 'fa-check-circle' angewendet werden.

Jede Hilfe auf diese geschätzt!

Quelle

2016-12-28 Rohit

es hilfreicher sein, wenn Sie eine jsfiddle oder somethi erstellt ng ähnlich zu zeigen, was Sie versucht haben. – Karthik

Ich habe versucht, von diesem http://output.jsbin.com/noqiwi/ – Rohit

Ihre Jsbin-Code weder eine Checkbox und keine Javascript-Funktion – Deep

Ich hoffe, dass dies dazu beitragen wird:

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

Hinweis: fontawesome sollte auf Seite enthalten sein. (Font-awesome.css/font-awesome.min.css)

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

Quelle

2016-12-28 04:49:21

Kann dies mit Maus-Hover durchgeführt werden? wenn es nicht aktiviert ist, dann auf Mouse-Hover-Show-Check-Symbol und umgekehrt – Rohit

Ja, Check Hover, Mouseover-Handler ein wenig. –

Sehen Sie, wenn dies Ihnen helfen kann. Ich habe es in deinem jsbin-Code versucht. 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'); 

    } 
});

Quelle

2016-12-28 04:48:13

ich einen JS ist here geschaffen habe. Das Kontrollkästchen ist ausgeblendet, so dass es so aussieht, als wäre das font-awesome-Icon das Kontrollkästchen. Sie können das Kontrollkästchen einblenden, um den Effekt zu sehen.

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

Quelle

2016-12-28 05:00:41 Karthik

Styling-Kontrollkästchen mit Schriftart super und Bootstrap

Antwort

Verwandte Themen