I am trying to intercept and handle changes in a bootstrap checkbox and I have added an 'onchange' event. Unfortunately, I was not successful. Currently, I have a button which can change the state of the checkbox and this is working.
Any hint would be much appreciated.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Toggle</title>
<link href="./css/github.min.css" rel="stylesheet">
<link href="./css/bootstrap.min.css" rel="stylesheet">
<link href="./font-awesome-4.6.3/css/font-awesome.min.css" rel="stylesheet">
<link href="./css/bootstrap-toggle.css" rel="stylesheet">
<link href="./css/stylesheet.css" rel="stylesheet">
<script src="./js/jquery-2.1.3.min.js"></script>
<script src="js/bootstrap-toggle.js"></script>
</head>
<body>
<div id="events" class="container">
<h3>API vs Input</h3>
<p>This also means that using the API or Input to trigger events will work both ways.</p>
<div class="example">
<input id="chk1" type="checkbox" data-toggle="toggle" onchange="fonctionTest()">
<input id="chk2" type="checkbox" data-toggle="toggle">
<input id="chk3" type="checkbox" data-toggle="toggle">
<input id="chk4" type="checkbox" data-toggle="toggle">
<button class="btn btn-success" onclick="toggleOnOff('#chk1','on')">On by API</button>
<button class="btn btn-danger" onclick="toggleOnOff('#chk1','off')">Off by API</button>
<div id="console-event"></div>
<script>
$(function() {
$('input:checkbox').change(function() {
$('#console-event').html('Toggle: ' + $(this).prop('checked'))
})
})
</script>
<script>
function fonctionTest(){
console.log("This is a test");
}
function toggleOnOff(selector,state){
console.log("element : " + selector);
console.log($(selector).prop('checked'));
$(selector).bootstrapToggle(state);
}
function toggleOn() {
$('#chk1').bootstrapToggle('on');
isOnOrOff();
}
function toggleOff() {
$('#chk1').bootstrapToggle('off');
isOnOrOff();
}
function isOnOrOff(){
var c=document.getElementById('chk1');
console.log(c.checked);
}
</script>
</div>
</body>
</html>
The documentation says to use jQuery change.
Demo:
$('#chk1').change(function() {
alert($(this).prop('checked'))
})
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<input id="chk1" type="checkbox" checked data-toggle="toggle">
Its working for all the checkboxes as shown in the examples below:
$('input:checkbox').change(function() {
$('#console-event').html('Toggle: ' + $(this).prop('checked'));
console.log("Change event: " + this.id);
})
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<input id="chk1" type="checkbox" data-toggle="toggle">
<input id="chk2" type="checkbox" data-toggle="toggle">
<input id="chk3" type="checkbox" data-toggle="toggle">
<input id="chk4" type="checkbox" data-toggle="toggle">
<div id="console-event"></div>
EDIT:
Add the code like:
<script>
$(function() {
$('input:checkbox').change(function() {
$('#console-event').html('Toggle: ' + $(this).prop('checked'))
})
})
</script>
<input id="chk1" type="checkbox" data-toggle="toggle" onclick="fonctionTest()">
function fonctionTest(){
if (document.getElementById('chk1').checked)
{
alert("Checked")
} else
{
alert("Not Checked")
}
}
Related
I am trying to add the function of selecting and deselecting all fields. What I have now doesn't work for me and I don't know why? Does anyone know why?
.....
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://igoradamenko.github.io/awsm.css/css/awsm.min.css">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<title>Report</title>
<script>
$("#selectAll").click(function() {
$("input[type=checkbox]").prop("checked", $(this).prop("checked"));
});
</script>
</head>
....
<label for='selectAll'><input id="selectAll" type="checkbox">Select All </label>
<input checked="checked" type="checkbox">Test</label>
<label th:each="item : ${userConfig.isEnableMap}">
<input checked="checked" type="checkbox" th:text="${item.key}" th:field="*{isEnableMap['__${item.key}__']}"/>
</label>
I added changes and it works now
<script>
$(document).ready(function () {
$("#selectAll").change(function () {
$("input:checkbox").prop('checked', $(this).prop("checked"));
});
});
</script>
You can try :
$("input[type=checkbox]").prop("checked",true);
I am using Bootstrap Toggle for checkboxes and I have this:
<input type="checkbox" name="hasLabel" data-on="With Label" data-off="Without Label" data-toggle="toggle" data-onstyle="success" data-offstyle="danger">
The problem is that if the input is checked the request.getParameter("hasLabel") returns on, and if it isn't returns null
How can I define that if the checkbox is not checked to return off, false or sth else?
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet" />
<input type="checkbox" name="hasLabel" data-on="With Label" data-off="Without Label" data-toggle="toggle" data-onstyle="success" data-offstyle="danger">
use this script to do something before submit form:
<script>
$("form").submit(function(){
if (!$('#my-input').prop('checked')) {
$('#my-input').bootstrapToggle('on')
$('#my-input').val('off')
}
});
</script>
I generate html table using bootstraptoggle as follows.
var configTableDiv = document.getElementById('exportListContent');
output = '<tr><td><input id="toggle-mode" type="checkbox" checked data-toggle="toggle" data-onstyle="warning" data-offstyle="info"></td></tr>';
configTableDiv.innerHTML = configTableDiv.innerHTML + output;
But relevant functionality or design not working within table td. It shows normal check box. Is there any solution?
Here is the relevant html output.
<td><input id="toggle-mode" type="checkbox" checked="" data-toggle="toggle" data-onstyle="warning" data-offstyle="info" data-on="Kite" data-off="InAppPurchase"></td>
You can do this using jquery.
var configTableDiv = document.getElementById('exportListContent');
output = '<tr><td><input id="toggle-mode" type="checkbox" checked data-toggle="toggle" data-onstyle="warning" data-offstyle="info"></td></tr>';
configTableDiv.innerHTML = configTableDiv.innerHTML + output;
$('#toggle-mode').bootstrapToggle();
var configTableDiv = document.getElementById('exportListContent');
output = '<tr><td><input id="toggle-mode" type="checkbox" checked data-toggle="toggle" data-onstyle="warning" data-offstyle="info"></td></tr>';
configTableDiv.innerHTML = configTableDiv.innerHTML + output;
$('#toggle-mode').bootstrapToggle();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/css/bootstrap.css" rel="stylesheet"/>
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<table id="exportListContent">
</table>
I think it works fine.
var configTableDiv = document.getElementById('exportListContent');
output = '<tr><td><input id="toggle-mode" type="checkbox" checked data-toggle="toggle" data-onstyle="warning" data-offstyle="info"></td></tr>';
configTableDiv.innerHTML = configTableDiv.innerHTML + output;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<table id="exportListContent"></table>
Your code is working perfect just make sure you include jquery.js, bootstrap-toggle.min.js, bootstrap.min.css and bootstrap-toggle.min.css
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<td><input id="toggle-mode" type="checkbox" checked="" data-toggle="toggle" data-onstyle="warning" data-offstyle="info" data-on="Kite" data-off="InAppPurchase"></td>
So I check normalize to add normalize library...
<link rel="stylesheet" href="http://necolas.github.io/normalize.css/3.0.1/normalize.css" />
I check jQuery and I add the jQuery source after normalize...
<link rel="stylesheet" href="http://necolas.github.io/normalize.css/3.0.1/normalize.css" />
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
but if I uncheck normalize, I want it to remove the normalize link, and if I check it again I want to add normalize after jQuery...
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<link rel="stylesheet" href="http://necolas.github.io/normalize.css/3.0.1/normalize.css" />
That's what's suppose to happen but instead when I add say AngularJS, and then normalize, it's suppose to show like this...
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" />
<link rel="stylesheet" href="http://necolas.github.io/normalize.css/3.0.1/normalize.css" />
but instead I get....
<link rel="stylesheet" href="http://necolas.github.io/normalize.css/3.0.1/normalize.css" />
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" />
So basically what I check I want that library to add after the other libraries I check.
My jQuery is...
// Add/Remove Library from Checkbox
$(".check").on("change", function() {
// Join All Checked Libraries
$(".full-library-code").val(function() {
return $.map($(".check:checked").next().next(), function (el) {
return el.value;
}).join('\n');
});
});
I believe this can happen without Codemirror, and I believe this problem is happening because of how I have my html structured with my jQuery, but I have no idea how to solve it.
$(document).ready(function() {
// Add/Remove Library from Checkbox
$(".check").on("change", function() {
// Join All Checked Libraries
$(".full-library-code").val(function() {
return $.map($(".check:checked").next().next(), function (el) {
return el.value;
}).join('\n');
});
});
});
<link rel="stylesheet" href="http://necolas.github.io/normalize.css/3.0.1/normalize.css" />
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<input type="checkbox" class="check" id="norm"> <label for="norm">Normalize</label>
<input type="text" class="hide" value='<link rel="stylesheet" href="http://necolas.github.io/normalize.css/3.0.1/normalize.css" />' /><br>
<input type="checkbox" class="check" id="jquery"> <label for="jquery">JQuery</label>
<input type="text" class="hide" value='<script src="http://code.jquery.com/jquery-latest.min.js"></script>' /><br>
<input type="checkbox" class="check" id="ang"> <label for="ang">Angular JS</label>
<input type="text" class="hide" value='<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" />' /><br>
<textarea class="full-library-code" placeholder="full library's code"></textarea>
Instead of looping all the checkboxes every time you should look if the clicked checkbox is 'checked' or 'unchecked'. Based on that, add or remove the text.
$(document).ready(function() {
$(".check").on("change", function() {
var textarea = $('.full-library-code');
var value = $(this).nextAll('input:first').val() + '\n';
if( $(this).prop('checked') == true )
textarea.val( textarea.val() + value );
else
textarea.val( textarea.val().replace( value, "") );
});
});
/* only for demo readability */
textarea { width: 500px; height: 200px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="check" id="norm" /> <label for="norm">Normalize</label>
<input type="text" class="hide" value='<link rel="stylesheet" href="http://necolas.github.io/normalize.css/3.0.1/normalize.css" />' /><br />
<input type="checkbox" class="check" id="jquery" /> <label for="jquery">JQuery</label>
<input type="text" class="hide" value='<script src="http://code.jquery.com/jquery-latest.min.js"></script>' /><br />
<input type="checkbox" class="check" id="ang" /> <label for="ang">Angular JS</label>
<input type="text" class="hide" value='<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" />' /><br />
<textarea class="full-library-code" placeholder="full library's code"></textarea>
Note: please mind A. Wolff's comment, you probably want to add AngularJS as a script... also, in the values I replaced the < and > for < and >
If you're getting the element in reverse order, simply use the reverse() method before the join(), like so:
// Join All Checked Libraries
$(".full-library-code").val(function() {
return $.map($(".check:checked").next().next(), function (el) {
return el.value;
}).reverse().join('\n');
});
What I understand from your question is that you want the later checked libraries to appear later in the textarea. Here is how you can do that
$(".check").on("change", function() {
var $textArea = $(".full-library-code");
var fullLibraryCode = $textArea.val();
var thisValue = $(this).next().next().val() + "\n";
if (this.checked) {
$textArea.val(fullLibraryCode + thisValue);
} else {
$textArea.val(fullLibraryCode.replace(thisValue, ""));
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="check" id="norm">
<label for="norm">Normalize</label>
<input type="text" class="hide" value='<link rel="stylesheet" href="http://necolas.github.io/normalize.css/3.0.1/normalize.css" />' />
<br>
<input type="checkbox" class="check" id="jquery">
<label for="jquery">JQuery</label>
<input type="text" class="hide" value='<script src="http://code.jquery.com/jquery-latest.min.js"></script>' />
<br>
<input type="checkbox" class="check" id="ang">
<label for="ang">Angular JS</label>
<input type="text" class="hide" value='<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" />' />
<br>
<textarea class="full-library-code" placeholder="full library's code"></textarea>
There is a version problem of library and JQuery mobile UI
I want to add a value to a radio button group by a click button.
Took the test at : http://jsfiddle.net/BUBtL/4/
Thanks in advance
<link rel="stylesheet" href="themes/theme-brixky.min.css" />
<link rel="stylesheet" href="themes/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile.structure-1.4.0.min.css" />
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
<fieldset data-role="controlgroup" id="field_radio_amis">
<legend></legend>
<label for="cat">Cat</label>
<input type="radio" name="radio_animal" id="cat" class="custom" value="cat" />
<label for="dog">Dog</label>
<input type="radio" name="radio_animal" id="dog" class="custom" value="dog" />
</fieldset>
<input type="button" name="btn_go" id="btn_go" value="Click to set button radio" />
</div>
$(document).ready(function () {
$("#btn_go").click(function () {
$('input:radio[name="radio_animal"]').filter('[value="cat"]').attr('checked', true);
});
return false;
});
This is a compatibility issue, you're using the wrong versions combination.
You need jQuery Mobile 1.4.0 and it's corresponding CSS file to work with jQuery 1.10.1
Change .attr to .prop
$('input:radio[name="radio_animal"]').filter('[value="cat"]').prop('checked', true);
Check jsfiddle
oups !
See my combinaison :
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css" />