I want to programmatically check a checkbox and trigger the checkbox's onchange function
I have tried ("#myCheckbox").click() but it only checks it and does not call its onchange function
How can I get the onchange function to execute as well?
edit:
When the document is ready i need the checkbox checked and its on change function called programatically.
Your change listener needs to be set before you trigger the click on the checkbox. The following code works with no issues:
$("#myCheckbox").on('change', function(){
console.log('Change');
}).click();
JSFiddle
How about something like this:
$('#myCheckbox').prop({ checked: true });
theOnchangeFunction();
$('#myCheckbox').on('change', theOnchangeFunction);
function theOnchangeFunction(){
}
you can try like below
$("#scheck").attr('checked', 'checked').change();
it will check the check box as well trigger onchange event for checkbox
ex:
Script :
$(document).ready(function () {
$("#scheck").attr('checked', 'checked').change();
});
function checkitout() {
alert("onchange event fired");
}
HTML :
<input type="checkbox" name="tdcheck" id="scheck" onchange="checkitout();" />
Don't understand, it works : http://jsfiddle.net/FW5Lp/
<input type="checkbox" id="myc">
<button id='clic'>click</button>
$('#myc').on('change', function(){alert('ca change');});
$('#clic').on('click', function(){$('#myc').trigger('click') });
Try both events by using on() like,
("#myCheckbox").on('click change',function(e){
alert(e.type);
})
Related
I try to replace an onclick event with other onclick event with javascript:
<button id='myButton' onClick=""/>
OLD onClick event :
$('#myButton').click(function(){
alert('1');
});
and then i do the same like that and change the value of alert , i do like this :
$('#myButton').click(function(){
alert('2');
});
The result of method above is alert show twice for 1 and 2. What i
want is only 2 that must show (i replace alert('1') with alert('2');
not add another alert. How to fix my code?
Try this one:
$(document).off('click', '#myButton').on('click', '#myButton', function(){
alert('2');
});
It will unbind previous event listener and add the new one.
You have 2 jQuery event listeners which listen same element. They know about element's id and this is enough for they work.
What I'm trying to say, that they don't care about onClick
You should code two JS functions, but not jQuery event listeners.
<button id='id' onClick="choose function"/>
function myFunction1() {
//your code
}
function myFunction2() {
//same
}
Finally the problem has been solved. I use method unbind like explain from here :
http://api.jquery.com/unbind/
For my case :
$('#myButton').unbind("click");
Thank you.
I want to trigger an event on a disabled input. I have tried the following code, nothing happened - there was no error, the even just didn't fire.
$(document).on('click', '.select-row', function(e){
...
});
How do I fix this?
You can't fire any mouse event like click on a disabled HTML element. Alternative of this, is to wrap up the element in a span or div and perform the click event on those.
$("div").click(function (evt) {
// do something
});
One more alternate is to make the element readonly instead of disabled, but bear in mind that jQuery does not have a default :readonly selector.
If it works for you, you may use readonly instead of disabled. Then you can use the click event with ease.
Demo
We had today a problem like this, but we didn't wanted to change the HTML. So we used mouseenter event to achieve that
var doThingsOnClick = function() {
// your click function here
};
$(document).on({
'mouseenter': function () {
$(this).removeAttr('disabled').bind('click', doThingsOnClick);
},
'mouseleave': function () {
$(this).unbind('click', doThingsOnClick).attr('disabled', 'disabled');
},
}, '.select-row');
This my solution
<div class="myInput"><input type="text" value="" class="class_input" disabled=""></div>
Jquery:
$("body").on("click", ".myInput", function(e) {
if($(e.target).closest('.class_input').length > 0){
console.log('Input clicked!')
}
});
If you need to trigger, use trigger() function.
$('.select-row').trigger('click');
HTML
<label class="filter-label" for="myId">
<input class="filter-checkbox" type="checkbox" id="myId"/>
<span>#item.Text</span>
</label>
Javascript
$('.filter-checkbox').click(function() {
//do something
}
//in another function I am calling below
$('#myId').trigger("click");
I dont know the reason but click trigger is working for checkbox but not for label I just want to trigger a click for label.
I think when I call trigger for #myId label also fires click event again then nothing happens. How can I solve this problem ?
Is this what you are trying to achieve..
$(".filter-label").on("click",function(){
alert("aa");
});
$("#bb").on("click",function(e){
e.preventDefault();
$("#myId").trigger("click");
alert("a");
});
FIDDLE DEMO
You can try this code:
$('.filter-checkbox').click(function() {
//do something
alert('checkbox clicked');
});
In another function I am calling below:
$('#myId').trigger("click");
I try to get the click on a checkbox using RactiveJS, as follows:
HTML:
<input type='checkbox' on-change-input-click="toggle">
JS:
toggle : function(){
treatment()
}
The toggle function never gets called.
Why would I like to catch the toggle event? Because once the checkbox toggled, other components must be changed. More precisely, this is a checkbox in a tree. Toggling a checkbox in a tree node toggles the descendants nodes.
Maybe there is another event than change, input or click I missed...
The complete code is in this fiddle.
Your fiddle is using version 0.3.7, in that version only proxy events are supported and there was no init event in which to subscribe, and there were no array methods on ractive itself. So you'd need to do something like:
ractive.on('toggle', function(){
this.get("clicked").push("clicked!");
});
Latest is version is 0.6.1, but you still have an issue with your code. If you want to call a method on the ractive instance, you need to invoke it in the handler:
HTML:
<input type='checkbox' on-change="toggle()">
JS:
toggle: function(){
treatment()
}
If you want to raise an event, you need to subscribe to that proxy name:
HTML:
<input type='checkbox' on-change="toggle">
JS:
oninit: function(){
this.on('toggle', function(){
treatment()
});
}
Try this:
I made a JS Fiddle for you
HTML:
<input id="myID" type='checkbox' onchange="yourFunction()" />
JS:
function yourFunction() {
alert("changed");
}
https://jsfiddle.net/4kxrkubc/
I have 5 checkboxes and 1 textarea in my form and would like to just hook OnChange() for all of these. However, for whatever reason nothing I have found on Stack Overflow seems to be getting called.
As this is the most basic example I found, what is wrong with this?
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"/>
<script type="text/javascript">
$(document).ready(function()
{
$("input").on("input", function()
{
alert("CHANGED");
});
}
</script>
you should handle change event:
$('input:checkbox,textarea').change(function () {
alert('changed');
});
The oninput event is only triggered when the text of an input changes, so it won't be fired for checkboxes. Try binding to the change event for checkboxes and the input event on textareas:
$("textarea").on("input", yourFunction);
$("input:checkbox").on("change", yourFunction);
function yourFunction() {
alert("CHANGED");
}
jsFiddle which demonstrates the above.
Note: The difference in this answer is the alert is triggered immediately in the textarea, not only on blur of the element.
Additional Note: The oninput event isn't supported in < IE9
Why you bind input event for checkbox, it's only fire for textarea?
You need to bind change event :
Try this one:
Updated
$(document).ready(function()
{
$("textarea").on("input", function(){
alert("CHANGED");
});
$("input").on("change", function(){
alert("CHANGED");
});
});
Try in fiddle
Checkboxes usually used with same name property so in selector name property will be usefull
$("input[name='interests']").change(function(){
/*some code*/
});
It will not work on textarea . you can assign all radio button and textarea a same class and then
$(".your_class_name").on("change", function()
{
alert("CHANGED");
});