I do not know the correct terminology for this, but I want the same effect as onclick but for a check box with jquery or javascript.
onclick version:
Link
I want the same effect as above but for a checkbox. The end result will be that the page should reload with an updated php query, but that part I can do. I just don't know what the onclick is for checkboxes.
checkbox:
<input type="checkbox" name="change" value="one" />changes php query
You should listen to the change event, as the checkbox can be selected or deselect with the keyboard too:
$('input[type="checkbox"][name="change"]').change(function() {
if(this.checked) {
// do something when checked
}
});
Similarly with plain JavaScript:
// checkbox is a reference to the element
checkbox.onchange = function() {
if(this.checked) {
// do something when checked
}
};
And last, although you really should not use inline event handlers, but if you have to:
<input ... onchange="handler.call(this)" />
where handler is like the handlers shown above.
Further reading:
jQuery documentation
MDN JavaScript Guide
quriksmode.org Introduction to Events
$('#input_id').click(function() {
// do what you want here...
});
$('input:checked').click(function() {
//do something
});
See http://api.jquery.com/checked-selector/ and http://api.jquery.com/checkbox-selector/
Related
I have a bootstrap toggle button in HTML like that:
<input id="warnbtn" type="checkbox" checked data-toggle="toggle" data-onstyle="success" data-offstyle="danger" >
and I try to catch the event of this with this script:
$(function() {
$('#warnbtn').change(function() {
var state = $(this).prop('checked')
if(state){
console.log("On");
}else{
console.log("Off");
}
})
})
My toggle is not smooth like the one in Bootstrap Toggle website
And the result I get with the .change function have lot of unwanted result like the picture here
It sounds like you are loading the same script numerous times. Every time you run that same block it adds a new change event listener and each will fire when the event occurs
You should find out why and try to prevent it
For a short term workaround you can call off() first to remove any previous event listeners that were called
Try:
$('#warnbtn').off('change').change(function() {
var state = $(this).prop('checked')
if(state){
console.log("On");
}else{
console.log("Off");
}
})
Thank u for answer my question :( I think I will replace the toggle button with another solution
I have a checkbox and I marked it as checked, however it doesnt fire the on change function. The note doesn't appear.
My code:
$('#checkbox1').prop("checked", true);
$('#checkbox1').change(function(){
if ($(this).is(':checked'))
$('#s-note').show();
else
$('#s-note').hide();
});
Do you expect the onchange to fire without user interaction?
Your issue is you set the checked state before you set the handler so if this would have trigged change, you would have not caught it. Your real issue here is setting the property with JavaScript does not fire the change event. So you need to trigger the change event manually.
$('#checkbox1')
.prop("checked", true) // set it to checked
.on("change", function() { // bind change event
$('#s-note').toggle($(this).is(':checked')); // toggle visibility
}).trigger("change"); //trigger that you need the change to run
If you are setting the note to be hidden by default and doing it with an id based selector, like this:
#s-note { display:none; }
Then your code won't be able to show it because it also uses an id based selector and that won't be more specific than the selector already in effect.
Instead, you'll have to default the note to hidden using a selector that is less specific than the id selector you will use to show/hide it later. That would be a class.
Also, it's critical that you set up the event handler before you trigger the event, so that when the event happens, there is already an event handler registered.
Now, for your needs, you don't really need the change event, click will do just fine. And, lastly, to ensure that you properly trigger the event, use JQuery's .trigger() method to set things in motion.
// Make sure you set up the callback first
$('#checkbox1').on("click", function(){
if ($(this).is(":checked"))
$('#s-note').show();
else
$('#s-note').hide();
});
// Then just trigger the event
$('#checkbox1').trigger("click");
.hide { display:none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="checkbox1">Test
<div id="s-note" class="hide">Special</div>
I hope this code snippet will help you
Approach 1
$('#idcheckbox').on('change', function() {
if($(this).is(':checked')) {
alert('checked');
} else {
alert('default ');
}
});
Approach 2
$('input[type=checkbox]').on('change', function() {
if($(this).is(':checked')) {
alert('checked');
} else {
alert('default ');
}
});
I ran your code in .net mvc and it runs fine.
This is the checkbox same id it hide or shows div element.
<input type="checkbox" id="checkbox1" value=" " />
<div id="s-note" style="display: none">
<label>Showing</label>
</div>
What are you trying to display?
I followed this example to capture an onChange() jQuery event for a radio button group:
JQuery $(#radioButton).change(...) not firing during de-selection
But in my case, the solution given in that example is not working. I have the following generated from my JSP:
<input id="object.reportEntity.reportEntityIsPrime1" name="object.reportEntity.reportEntityIsPrime" type="radio" value="Y_YES" checked="checked"/>Prime
<input id="object.reportEntity.reportEntityIsPrime2" name="object.reportEntity.reportEntityIsPrime" type="radio" value="N_NO"/>Not Prime
JS:
$(document).ready(function() {
// Display Alert on Radio Change
$('input[name=object.reportEntity.reportEntityIsPrime]:radio').change(function () {
alert('Radio Button clicked');
});
}
The alert is not being diplayed. Also, there's this error:
Syntax error, unrecognized expression "input"
You should delegate the events.
Event delegation allows us to attach a single event listener, to a
parent element, that will fire for all descendants matching a
selector, whether those descendants exist now or are added in the
future.
Also, you need to add " in your selector e.g. [name=""] Observe the following...
$('body').on('change', 'input[name="object.reportEntity.reportEntityIsPrime"]:radio', function() {
alert('Radio Button clicked');
});
side note: you are missing ); on the end of your ready function
JSFiddle Link - working demo
Also, be sure to check out the jQuery Understanding Event Delegation docs for more info
Use quote marks for your name like this:
$('input[name="object.reportEntity.reportEntityIsPrime"]:radio')
Quote the name attribute in your selector string.
$(document).ready(function() {
// Display Alert on Radio Change
$('input[name="object.reportEntity.reportEntityIsPrime"]:radio').change(function () {
alert('Radio Button clicked');
});
}
I am making a web app. In one part, I have a checklist dynamically generated with javascript.
I want to have a jQuery function executed when the checklist is checked.
Here is the code that dynamically generated the checklist:
var checkbox = document.createElement("input");
checkbox.setAttribute("type","checkbox");
checkbox.setAttribute("class", "tickbox");
document.getElementById("sortable").appendChild(checkbox);
Here is the output HTML file on execution, that shows that the checkbox was actually created:
<input type="checkbox" class="tickbox">
I want to have a function executed when the box is checked. I have tried:
1.
$('.tickbox').change(function () {
alert("Here");
if ($(this).attr("checked")) {
alert("Yeah");
}
2.
if($(.tickbox).is(':checked')){
alert("Yeah!!!");
3.
$('.tickbox').each(function(){
if($(this).is(':checked')){
alert("Yeah!!!");
}
})
But nothing worked. What's wrong? What should I do?
Note: A lot of other javaScript and jQuery, including many other function calls are working completely fine.
You said you have dynamically added checkbox so in order to add event handler to that DOM you has to use .on().
Example.
$(document).on('change','.tickbox',function(){
if($(this).is(':checked')){
alert("Yeah!!!");
}
})
Try this....
var checkbox = document.createElement("input");
checkbox.setAttribute("type","checkbox");
checkbox.setAttribute("class", "tickbox");
document.getElementById("sortable").appendChild(checkbox);
$(".tickbox").click(function(){
if ($(this).is(':checked')) {
alert("checked");
}
});
Example: http://jsfiddle.net/7xY8Y/
for dynamically generated element you need to use on():
$(document).on("change",'.tickbox',function () {
if ($(this).attr("checked")) {
alert("Yeah");
}
});
because your tickbox created dynamically then you need to bind event on document for class name tickbox for change event.
Was styling the checkboxes of my webpage with jquery using the tutorial here
But i realized that I could not do SelectAll checkbox that will select all the checkboxes in my list. It works in the backend (the checkboxes are selected) but it does not show in my page.
Added a demo to show my problem. May need to port to your system to test it out
Demo
what can I add to the jQuery Custom Radio-buttons and Checkbox javascript file in the to achieve the select all checkbox function
Thank you!
You can try this FIDDLE:
$(function () {
var $chbxs = $('.checkbox');
$('#sel_all_lbl').toggle(
function() {
$chbxs.css('background-position', '50% -50px');
$('#checkboxall .truefalse').prop('checked', true);
},
function() {
$chbxs.css('background-position', '50% 0px');
$('#checkboxall .truefalse').prop('checked', false);
}
);
});
What I've done? First, in your fiddle you need to correct some syntax errors, then add a plugin code to the DOM, and you scripts to the script panel, so they will fire when DOM is ready. (This is all about jsFiddle, so you to understand how it works)
About actually your code, you attached click-handlers (.toggle()) to the checkbox element. But click event does not fire on it. Script simply changed the property of the checkbox, but there is no click. So you need to attach these handler to the element wish user actually clicks, that is square icon. (I added an id="sel_all_lbl" to it)
Try to use event handling on the select all checkbox and manually check all the checkboxes from javascript.