Develop Reference

Create checkbox dynamically using the jquery UI "checkboxradio" widget

I am working with the jquery UI widget called checkboxradio because I find it interesting the aesthetics they offer without the checkbox, as if it were a button.
The problem I am having is that I need to dynamically create the checkboxes because depending on the information in my database, there will be one or the other. Specifically, the problem is that I am able to generate the checkbox I need without problems, but the widget style is not applied to them. That is, they appear on my page but they come out in the default format.
Can anyone help me tell me if I am importing something wrong, or calling it wrong, etc?
Below is my code. I have adapted it by creating a single checkbox, because the only difference would be that it would have a loop that creates more or less checkboxes the same as there is now, but with different names.
function printNodeFilters(nodes) {
$("#legend_filtro_datos").after('<label for="checkbox-2">tracker 1</label>');
$("#legend_filtro_datos").after('<input type="checkbox" name="TRACKER1" id="checkbox-2">');
}
// MAIN
$(document).ready(function() {
printNodeFilters();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- *** WIDGET *** -->
<!-- <link rel="stylesheet" href="/resources/demos/style.css"> -->
<!-- <script src="https://code.jquery.com/jquery-1.12.4.js"></script> -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function() {
$("input").checkboxradio({
icon: false
});
});
</script>
<!-- ****** -->
<div class="col-2" id="filter_container">
<!-- FILTROS-->
<legend>Filtros mapa: </legend>
<label for="radio_ult_pos">Última posición</label>
<input type="radio" name="radio_select" class="filtros_mapa" id="radio_ult_pos" checked>
<label for="radio_ruta">Ruta</label>
<input type="radio" name="radio_select" class="filtros_mapa" id="radio_ruta">
<legend id="legend_filtro_datos">Filtros datos: </legend>
<!-- AQUÍ IRÍAN LOS CHECKBOX -->
<button type="button" class="btn btn-success" id="filtrar_btn_map">Filtrar</button>
</div>
I do not quite understand what happens, because if I create it in a static way directly in my html, there is no problem, it looks and works perfect. This makes me think that in my js file maybe I need to call the widget or something, but I don't know what.
This would be a functional code if you create anything for js,
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- *** WIDGET *** -->
<!-- <link rel="stylesheet" href="/resources/demos/style.css"> -->
<!-- <script src="https://code.jquery.com/jquery-1.12.4.js"></script> -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function() {
$("input").checkboxradio({
icon: false
});
});
</script>
<!-- ****** -->
<div class="col-2" id="filter_container">
<!-- FILTROS-->
<legend>Filtros mapa: </legend>
<label for="radio_ult_pos">Última posición</label>
<input type="radio" name="radio_select" class="filtros_mapa" id="radio_ult_pos" checked>
<label for="radio_ruta">Ruta</label>
<input type="radio" name="radio_select" class="filtros_mapa" id="radio_ruta">
<legend id="legend_filtro_datos">Filtros datos: </legend>
<label for="checkbox-2">tracker 1</label>
<input type="checkbox" name="TRACKER1" id="checkbox-2">
<button type="button" class="btn btn-success" id="filtrar_btn_map">Filtrar</button>
</div>
As you can see, in this second example it is created well. So how can it be that when doing the append does not work, if I have copied and pasted the same code?I'm appending wrong? I need to call the function in my js after printing the checkbox?
I hope I have explained well, thank you very much.

When adding additional elements dynamically, you must then refresh the widget or, if it is not currently initialized, initialize the widget.
$(function() {
printNodeFilters();
$("input").checkboxradio();
});
Full example:
function printNodeFilters(nodes) {
$("#legend_filtro_datos").after('<label for="checkbox-2">tracker 1</label>');
$("#legend_filtro_datos").after('<input type="checkbox" name="TRACKER1" id="checkbox-2">');
}
$(function() {
printNodeFilters();
$("input").checkboxradio();
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="col-2" id="filter_container">
<!-- FILTROS-->
<legend>Filtros mapa: </legend>
<label for="radio_ult_pos">Última posición</label>
<input type="radio" name="radio_select" class="filtros_mapa" id="radio_ult_pos" checked>
<label for="radio_ruta">Ruta</label>
<input type="radio" name="radio_select" class="filtros_mapa" id="radio_ruta">
<legend id="legend_filtro_datos">Filtros datos: </legend>
<!-- AQUÍ IRÍAN LOS CHECKBOX -->
<button type="button" class="btn btn-success" id="filtrar_btn_map">Filtrar</button>
</div>

Styling checkbox with font awesome and bootstrap

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

Using React with Bootstrap Toggle

I want to use bootstrap toggle inside a React component. However a regular checkbox is shown instead of a styled element. How that could be fixed?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap core CSS --> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<script src="https://fb.me/react-0.13.1.js"></script>
<script src="https://fb.me/JSXTransformer-0.13.1.js"></script>
<script type="text/jsx">
var WordCheckBox = React.createClass({
render: function() {
return (
<div className="checkbox">
<label>
<input type="checkbox" data-toggle="toggle" data-on="On" data-off="Off" />
option1
</label>
</div>
);
}
});
React.render(
<WordCheckBox />,
document.getElementById('content')
);
</script>
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.0/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.0/js/bootstrap-toggle.min.js"></script>
</head>
<body>
<!--doesn't work. checkbox instead of toogle shown-->
<div id="content"> </div>
<!--works-->
<div class="checkbox">
<label>
<input type="checkbox" data-toggle="toggle" data-on="On" data-off="Off">
<span>option2</span>
</label>
</div>
<!--works-->
<div class="checkbox" data-reactid=".0">
<label data-reactid=".0.0">
<input type="checkbox" data-toggle="toggle"
data-on="On" data-off="Off"
data-reactid=".0.0.0">
<span data-reactid=".0.0.1">option3</span>
</label>
</div>
</body>
</html>

Based on their docs
You need to wire up the plugin's functionality when your React component mounts (when it spits out the HTML into the DOM)
Add a componentDidMount lifecycle hook and give the input a ref attribute to accomplish this.
var WordCheckBox = React.createClass({
componentDidMount: function() {
$( this.refs.toggleInput.getDOMNode() ).bootstrapToggle();
}
...
render: function() {
...
<input ref="toggleInput" type="checkbox" data-toggle="toggle" data-on="On" data-off="Off" />

If your input are added dynamically like it was the case for me, you'll want to call the function in the componentDidUpdate function.
Also, you'll then probably get the input by class instead of refs.
componentDidUpdate()
{
$('.toggleInput').bootstrapToggle();
}
And further:
<input className="toggleInput" type="checkbox" checked data-toggle="toggle">

on - Sets the toggle to 'On' state
off - Sets the toggle to 'Off' state
componentDidMount: function() {
$( this.refs.toggleInput.getDOMNode() ).bootstrapToggle('on');
}

When I click the button, function doesn't get called [duplicate]

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>

Checked Checkbox not updated in UI

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!