I am trying to style checkbox using font awesome with bootstrap. I am using two font awesome icons fa-circle-thin and fa-check-circle.
On mouse hover it should toggle class based on it is checked/unchecked and on click of check box javascript function should get called.
When trying to bind model as list if particular model property is False then 'fa-circle-thin' should be applied and if it is checked then 'fa-check-circle' should get applied.
Any help on this appreciated !
I hope this will help :
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)
});
Note : fontawesome should be included on page. (font-awesome.css / font-awesome.min.css)
JSFiddle : https://jsfiddle.net/nikdtu/mLuubpaq/
See, if this can help you. I have tried in your jsbin code.
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');
}
});
I have created a JS bin here. The checkbox is hidden so it will be as if the font-awesome icon is the checkbox. You can unhide the checkbox to see the effect.
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");
});
})
Related
I have a checkbox that if checked, will check the other checkbox. I am using material design. The checked property of the material box checkbox in undefined. How do I make the checked property become defined? What am I doing wrong?
This is the link where the problem happens
<script>
$(document).ready(function(){
$("#exclude_all").change(function(){
var element_all = document.querySelectorAll('[id="exclude_all"]');
var elements = document.querySelectorAll('[id^="exclude_dir_"]');
for(var i=0, n=elements.length; i<n; i++){
var element = elements[i];
if($('#exclude_all').is(":checked")) {
element.MaterialCheckbox.check();
} else {
element.MaterialCheckbox.uncheck();
}
}
});
});
</script>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.grey-light_blue.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<ol style="padding-left:37px;list-style:none;font-size:12px;">
<li>
<label id="label_exclude_all" name="label_exclude_all" class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="exclude_all" style="margin-left:3px;padding-left:31px;">
<input type="checkbox" name="exclude_all" id="exclude_all" class="mdl-checkbox__input" value="Buscar""">
<span class="mdl-checkbox__label" style="font-size:12px;color:#757575;">Excluir tudo</span>
</label>
</li>
<li>
<label name="label_exclude_dir_0" id="label_exclude_dir_0" class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="exclude_dir_0" style="margin-left:3px;padding-left:31px;">
<input type="checkbox" name="exclude_dir_0" id="exclude_dir_0" class="mdl-checkbox__input" value="Atibaia">
<span class="mdl-checkbox__label" style="font-size:12px;color:#757575;">Atibaia</span>
</label>
</li>
</ol>
</body>
</html>
When I change this:
element.MaterialCheckbox.check();
To this:
element.parentNode.MaterialCheckbox.check();
I guess you need to do for label and not the input checkbox.
All the instructions that I read about material design lite doesn't ever mention that you need to use parentNode. Anybody here can explain why?
Marcos
This is Meterial CheckBox HTML code
How check and UnCheck Using JQuery.
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12">
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="OnAccount">
<input type="checkbox" id="OnAccount" class="mdl-checkbox__input" />
<label class="mdl-checkbox__label">On Account</label>
</label>
</div>
The documentation for the Material Design Lite API never seemed to get fully completed before they put it in "limited support" and moved on to Material Components for the web. You can sift through the source code for the MDL checkbox to see that the label element is integral to the display and that the MDL checkbox functions need to be called on that element.
Below is a working snippet that targets the elements you need without the extra steps:
$(document).ready(function() {
// better to add a class to your checkbox labels and update this selector
const elems = $('[id^=label_exclude_dir_]');
$('#exclude_all').change(function() {
const checked = $(this).is(':checked');
elems.each(function() {
if (checked) {
this.MaterialCheckbox.check();
} else {
this.MaterialCheckbox.uncheck();
}
});
});
});
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.grey-light_blue.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<ol style="padding-left:37px;list-style:none;font-size:12px;">
<li>
<label id="label_exclude_all" name="label_exclude_all" class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="exclude_all" style="margin-left:3px;padding-left:31px;">
<input type="checkbox" name="exclude_all" id="exclude_all" class="mdl-checkbox__input" value="Buscar">
<span class="mdl-checkbox__label" style="font-size:12px;color:#757575;">Excluir tudo</span>
</label>
</li>
<li>
<label name="label_exclude_dir_0" id="label_exclude_dir_0" class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="exclude_dir_0" style="margin-left:3px;padding-left:31px;">
<input type="checkbox" name="exclude_dir_0" id="exclude_dir_0" class="mdl-checkbox__input" value="Atibaia">
<span class="mdl-checkbox__label" style="font-size:12px;color:#757575;">Atibaia</span>
</label>
</li>
</ol>
</body>
</html>
I have this html (below), for an input color type, I want to show the Font Awesome icons instead of the input, which works fine, the thing is that by setting the display of the input to none, the model is not being updated by the new color, this works fine if I remove the display setting. Any suggestions?
<label for="color{{id_form_group}}" class="fa-stack">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-paint-brush fa-stack-1x" style="color:{{objeto.style.color}};"></i>
<input id="color{{id_form_group}}" ng-model="objeto.style.color" type="color" style="display:none;">
</label>
You will probably need to post the rest of your code, because I am able to get it to work fine with your code snippet:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.objeto = {
style: {
color: ""
}
}
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<script data-require="angular.js#1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>Color: <span style="font-weight: bold; color: {{objeto.style.color}}">{{objeto.style.color}}</span></p>
<form id="my-form">
<label for="color{{id_form_group}}" class="fa-stack">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-paint-brush fa-stack-1x" style="color:{{objeto.style.color}};"></i>
<input id="color{{id_form_group}}" ng-model="objeto.style.color" type="color" style="display: none" />
</label>
</form>
</body>
</html>
Ok changing the css to style="visibility:hidden;" instead of style="display:none;" did the trick, I'm not sure why, if any one has a better answer or an explanation to why this happens, please post it and I'll mark your answer as correct.
You don't have to use display:none with angularjs because it provides ng-hide and ng-show directives
This should do the trick,
<input id="color{{id_form_group}}" ng-model="objeto.style.color" type="color" ng-hide="true"">
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 8 years ago.
I'm new to JavaScript and JQuery, and I'm trying to figure out why my function doesn't get called when I press the button. My only clue is that the Firefox Console is showing TypeError: document.getElementById(...) is null. I found this example, which says "document.write will overwrite the entire DOM if it's called after the document has finished being parsed" and that's why it's happening. I took a look at my code, and I moved the button into my div tag and it's still happening. I also tried moving the button into it's own div tags. Compiler didn't seem to like syntax when I tried adding html tags where the button is. I'm not sure what I'm supposed to do to fix this.
I'm following this example for the function call on button click. Hopefully I'm applying it ok to my project.
This is my code:
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>jQuery Michele Project</title>
<link href="css/skins/polaris/polaris.css" rel="stylesheet">
<link href="css/skins/all.css" rel="stylesheet">
<link href="css/demo/css/custom.css" rel="stylesheet">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="js/jquery-1.11.0.js"></script>
<script type="text/javascript" src="js/jquery.ui.core.js"></script>
<script type="text/javascript" src="js/jquery.ui.widget.js"></script>
<script src="js/icheck.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.input').iCheck({
checkboxClass:'icheckbox_polaris',
radioClass:'iradio_polaris',
increaseArea:'10%'
});
});
</script>
<script type="text/javascript">
// Returns an array with values of the selected (checked) checkboxes in "frm"
function getSelectedChbox(frm) {
// JavaScript & jQuery Course - http://coursesweb.net/javascript/
var selchbox = []; // array that will store the value of selected checkboxes
// gets all the input tags in frm, and their number
var inpfields = frm.getElementsByTagName('input');
var nr_inpfields = inpfields.length;
// traverse the inpfields elements, and adds the value of selected (checked) checkbox in selchbox
for(var i=0; i<nr_inpfields; i++) {
if(inpfields[i].type == 'checkbox' && inpfields[i].checked == true)
selchbox.push(inpfields[i].value);
}
return selchbox;
}
document.getElementById('btntest').onclick = function() {
var selchb = getSelectedChbox(this.form);
alert(selchb);
}
</script>
<style type="text/css">
ul {list-style-type: none}
img {padding-right: 20px; float:left}
#infolist {width:500px}
</style>
</head>
<body>
<form>
<div class="skin skin-line">
<div class="arrows">
<div class="top" data-to="skin-flat"></div>
<div class="bottom" data-to="skin-polaris"></div>
</div>
</div>
<div class="skin skin-polaris">
<div class="arrows">
<div class="top" data-to="skin-line"></div>
<div class="bottom" data-to="skin-futurico"></div>
</div>
<h3>Select Items for Column Headings</h3>
<dl class="clear">
<dd class="selected">
<div class="skin-section">
<h4>Live</h4>
<ul class="list">
<li>
<input tabindex="21" type="checkbox" id="polaris-checkbox-1">
<label for="polaris-checkbox-1">Checkbox 1</label>
</li>
<li>
<input tabindex="22" type="checkbox" id="polaris-checkbox-2" checked>
<label for="polaris-checkbox-2">Checkbox 2</label>
</li>
<li>
<input type="checkbox" id="polaris-checkbox-3" >
<label for="polaris-checkbox-3">Checkbox 3</label>
</li>
<li>
<input type="checkbox" id="polaris-checkbox-4" checked >
<label for="polaris-checkbox-4">Checkbox 4</label>
</li>
</ul>
</div>
<script>
$(document).ready(function(){
$('.skin-polaris input').iCheck({
checkboxClass: 'icheckbox_polaris',
radioClass: 'iradio_polaris',
increaseArea: '20%'
});
});
</script>
//$('#checkbox').prop('checked')
</dd>
</dl>
</div>
<div id="loading">
<input type="button" value="Click" id="btntest" />
</div>
</form>
</body>
</html>
The issue is you assign the click handler before the element is available in the DOM. To resolve, you should wrap it in a DOM ready function:
$(function(){
document.getElementById('btntest').onclick = function() {
var selchb = getSelectedChbox(this.form);
alert(selchb);
}
});
Note: $(function(){ ... }); is a shortcut for $(document).ready(function(){ ... });
You're running document.getElementById('btntest') before that element exists. Put this script after your button on the page, not before it:
<script>
document.getElementById('btntest').onclick = function() {
var selchb = getSelectedChbox(this.form);
alert(selchb);
}
</script>
I have something like this
I did not use input type checkbox rather, I used images.
If the checkbox is unchecked li will not have a class "checked"
<li ng-model="FirstCheckBox">
<div>Check1</div>
</li>
but if the checkbox is checked li will have a class "checked"
<li ng-model="FirstCheckBox" class="checked">
<div>Check1</div>
</li>
My concern is what is the proper way to set the $scope.FirstCheckBox to true or false based on it's li having a class "checked"
Also I am not sure if the ng-model is supposed to be at the li
If any events are being triggered then it can be done by passing $event and reading the attributes.
You can use ngClass to dynamically change the css.
try this,
In html,
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script data-require="angular.js#1.0.7" data-semver="1.0.7" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="app.js"></script>
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet">
</head>
<body ng-controller="mainCtrl">
<h1>{{greetings}} Plunker!</h1>
<div ng-class="selectCss">
<span ng-click="toggle(selectCss)">Click me to change css</span>
</div>
</body>
</html>
In app.js file,
var app=angular.module('myApp',[]);
app.controller('mainCtrl',['$scope',function(scope){
scope.greetings='hello';
scope.selectCss='unchecked';
scope.toggle=function(selectCss){
if(selectCss==='checked'){
scope.selectCss='unchecked';
}else{
scope.selectCss='checked';
}
}
}])
In style.css,
.unchecked{
background-color:yellow;
}
.checked{
background-color:green;
}
Have a look at this plunker.
Hope this answers your query :)
I have a problem regarding checking checkbox by JS.When I checked the checkbox by JS it seems like in program that it's checked but in UI it's not updated .
if anyone have solution for this
<!DOCTYPE html>
<html>
<head>
<title>Check</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script>
function getCheckedValue()
{
return ((document.getElementById("rock").checked));
}
function setCheckedValue(toBeChecked){
document.getElementById(toBeChecked).checked="checked";
alert((document.getElementById(toBeChecked).checked))
alert($('#'+toBeChecked).attr('checked'))
}
</script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>What kind/s of music do you listen to?</h1>
</div><!-- /header -->
<div data-role="content">
<input type="checkbox" class="music" name="music" id="rock" value="rock" >
<label for="rock">Rock</label>
<input type="button" value="Get" onclick="alert(getCheckedValue())">
<input type="button" value="Set" onclick="setCheckedValue('rock') ">
</div>
</div>
</body>
</html>
Instead of using attr I would highly recommend you use prop.
The preferred cross-browser-compatible way to determine if a checkbox is checked is to check for a "truthy" value on the element's property using one of the following:
if ( elem.checked )
if ( $(elem).prop("checked") )
if ( $(elem).is(":checked") )
The .prop() method should be used to set disabled and checked instead of the .attr() method. The .val() method should be used for getting and setting value.
$("input").prop("disabled", false);
$("input").prop("checked", true);
$("input").val("someValue");
I have worked after getting response from all of your efforts and the working code is below.
<!DOCTYPE html>
<html>
<head>
<title>Check</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script>
function getCheckedValue()
{
return (document.getElementById("rock").checked);
//return $('input[name=music]').checked;
}
function setCheckedValue(checkboxName,toBeChecked){
$('input[name='+checkboxName+']').prop("checked", true).checkboxradio("refresh");
}
</script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>What kind/s of music do you listen to?</h1>
</div><!-- /header -->
<div data-role="content">
<input type="checkbox" class="music" name="music" id="rock" value="rock" >
<label for="rock">Rock</label>
<input type="button" value="Get" onclick="alert(getCheckedValue())">
<input type="button" value="Set" onclick="setCheckedValue('music','rock') ">
</div>
</div>
</body>
</html>
try
function setCheckedValue(toBeChecked){
document.getElementById(toBeChecked).checked=true;
alert((document.getElementById(toBeChecked).checked))
alert($('#'+toBeChecked).prop('checked'))
}
Jquery-mobile appends classes for such things. Basically within that one input/label pair you have the following:
<div class="ui-checkbox">
<input type="checkbox" class="music" name="music" id="rock" value="rock">
<label for="rock" data-corners="true" data-shadow="false" data-iconshadow="true" data- wrapperels="span" data-icon="checkbox-off" data-theme="c" class="ui-btn ui-btn-corner-all ui-btn-icon-left ui-checkbox-off ui-checkbox-on ui-btn-up-c">
<span class="ui-btn-inner ui-btn-corner-all">
<span class="ui-btn-text">Rock</span>
<span class="ui-icon ui-icon-checkbox-off ui-icon-shadow"> </span>
</span>
</label>
</div>
What you need to do is find a way to remove and add the classes to the label and span tags. I've done this for the label, but not for the span as I'm about to finally get some sleep.
function setCheckedValue(toBeChecked){
document.getElementById(toBeChecked).checked="checked";
$("label[for='rock']").addClass("ui-checkbox-off");
$("label[for='rock']").addClass("ui-checkbox-on");
}
I did stumble across:
$("#checkbox-label").checkboxradio("refresh");
From: http://forum.jquery.com/topic/what-is-the-most-effective-way-of-unchecking-a-checkbox
Not entirely the same question, I know but slightly relevant. I didn't have the chance to finagle with it and get it to work...nor did I look much more into it to see if it does even work.
In short, the property is being set to "checked", however, the elements need to have their css refreshed in order to accommodate the new 'state'.
I hope this helps!