Checkbox onchange event not firing

Checkbox onchange event not firing - javascript

I have the following setup: 2 checkboxes such that when the first is checked, it toggles the state of the second one. The second one has an onchange listener which is supposed to trigger an alert when it changes.
Problem is, when I click on it, the onchange is fired alright, but when I use the first to change it's state, the event isn't fired.
I'm I missing something? or is the onchange event basically meant to act like an onclick?
<!DOCTYPE html>
<html>
<body>
<form action="">
<input id='one' type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input id='two' type="checkbox" name="vehicle" value="Car" checked>I have a car
</form>
<script>
function show(){
alert(document.getElementById('two').checked);
}
document.getElementById('one').addEventListener('click', function(){
var two = document.getElementById('two');
two.checked = ! two.checked;
});
document.getElementById('two').addEventListener('change', function(){
alert("changed");
});
</script>
</body>
</html>
Thanks for helping :)

You are changing an attribute, that will not make the event fire, you can either trigger the change event, or instead click the second checkbox.
Try changing:
document.getElementById('one').addEventListener('click', function(){
var two = document.getElementById('two');
two.checked = ! two.checked;
});
To:
document.getElementById('one').addEventListener('click', function(){
document.getElementById('two').click()
});
Another solution would be triggering the change event:
document.getElementById('one').addEventListener('click', function(){
var two = document.getElementById('two');
two.checked = ! two.checked;
two.dispatchEvent('change');
});

If the goal is to have only one checkbox checked, here is a jQuery solution:
$(document).ready(function () {
$('#one, #two').change(function (e) {
if ($(this).prop('checked')) {
$('#one, #two').not(this).prop('checked', false)
}
});
});

Related

jQuery-Events: How To Unbind Keyup Event If One Input Detected?

I've currently this function here:
let input = [];
input.push(jQuery("#test1"));
input.push(jQuery("#test2"));
input[0].add(input[1] ).one( "keyup", function () {
console.log("Keyup!");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="test1"/>
<input id="test2"/>
It works but I've a bit of a problem. I need to unbind the keyup event if one of the two inputs are detected so that the other one don't works anymore. How can I do this?
As result, only one log Keyup! should be visible.

u can unbind with jquery-off -method (https://api.jquery.com/off/) like so:
let input = [];
input.push(jQuery("#test1"));
input.push(jQuery("#test2"));
input[0].add(input[1] ).one( "keyup", function () {
$(input).each(function() {
$(this).off("keyup");
});
console.log("Keyup!");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="test1"/>
<input id="test2"/>

So, this was my solution:
let input = [];
input.push(jQuery("#test1"));
input.push(jQuery("#test2"));
input[0].add(input[1]).one("keyup", function() {
console.log('keyup!');
for(i=0; i<input.length; i++){
if(input[i].attr('id') != event.target.id){
input[i].unbind();
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="test1" />
<input id="test2" />
Don't know if you'll like it, but I find useful to know which element triggered the event in order to use this info after.
Moreover, you'll be able to add more elements to input array and automatically unbind the event from them too.

To achieve that you can add an extra data attribute and check against that:
<input id="test1" data-disabled="false"/>
<input id="test2" data-disabled="false"/>
Then your js would look like this:
input[0].add(input[1] ).one( "keyup", function () {
if ($(this).attr("data-disabled")==="true") {
return false;
}
$(this).siblings().attr("data-disabled","true");
console.log("Keyup!");
});

Add an onchange event listener to an html input field

I would like to add an onchange event to those input fields without jquery:
<input type="text" id="cbid.wizard.1._latitude">
<input type="text" id="cbid.wizard.1._longitude">
I can already call the object with
<script type="text/javascript">
alert(document.getElementById('cbid.wizard.1._latitude').id);
</script>
In the end, I want to add this behaviour, that if you enter a pair of coordinates into the first input, I will spread the pair over the two input fields?
How do I add an onchange event with javascript?

Ummm, attach an event handler for the 'change' event?
pure JS
document.getElementById('element_id').onchange = function() {
// your logic
};
// or
document.getElementById('element_id').addEventListener(
'change',
callbackFunction,
false
);
jQuery
$('#element_id').change(function() {
// your logic
});
Note
Note, that change event on the text field will be fired after the blur event. It's possible that your looking for keypress event's or something like that.

document.getElementById('cbid.wizard.1._latitude').onchange = function(){
//do something
}
GlobalEventHandlers.onchange docs
or
document.getElementById('cbid.wizard.1._latitude').addEventListener("change", function(){
//do something
});
EventTarget.addEventListener docs

use addEventListener in your window.onload
window.onload=function(){
document.getElementById('cbid.wizard.1._latitude').addEventListener("change", function(){
//do something
});
};
addEventListener

Please try with the below code snippet.
<body>
<input type="text" id="cbid.wizard.1._latitude">
<input type="text" id="cbid.wizard.1._longitude">
<script type="text/javascript">
var txt1 = document.getElementById('cbid.wizard.1._latitude');
txt1.addEventListener('change', function () { alert('a'); }, false);
</script>
</body>

How to stop event in javascript? [duplicate]

This question already has answers here:
How to stop event propagation with inline onclick attribute?
(15 answers)
Closed 9 years ago.
consider following,
<body>
<form id="form1" runat="server">
<div>
<input type="text" id="txt1" />
<input type="button" id="btn1" value="Submit"/>
</div>
</form>
<script>
$("#txt1").live("blur", function () {
console.log('blur');
return false;
});
$("#btn1").live("click", function () {
console.log('click');
return false;
});
</script>
</body>
Above code will log blur event and click event on trigger of respective events.
If click or change something in text box and then click on button btn1 blur and click event will happen respectively.What i want is if blur event is happening because of btn1 then click event should not happen,it should log only blur event,I want to stop click event from happening.
How to do this? Can anyone help?

try this
<form id="form1" runat="server">
<div>
<input type="text" id="txt1" />
<input type="button" id="btn1" value="Submit"/>
</div>
</form>
javascript code
$("#txt1").on("blur", function (event) {
event.preventDefault();
alert('blur');
return false;
});
$("#btn1").on("click", function (event) {
event.preventDefault();
alert('click');
return false;
});
also test it here and remember live keyword is deprectaed from jquery 1.9 use on instead of live in jquery 1.9 or greater.

Here is one way to solve it by adding a timeout.
var inFocus = false;
$("#txt1").focus(function () {
inFocus = true;
$("#log").prepend("<p>focus</p>");
});
$("#txt1").blur(function () {
setTimeout(function(){inFocus = false;},200);
$("#log").prepend("<p>blur</p>");
});
$("#btn1").click(function () {
if (!inFocus) {
$("#log").prepend("<p>click</p>");
}
});
In the fiddle example, I put the log out to the window.

You cannot "stop" an other/foreign event like so. Event.preventDefault() and/or Event.stopPropagation() (which both will get triggered when returning false from within a jQuery event handler), will allow you to stop and prevent the exact same event from further processing on parent nodes.
In your instance, you need your own logic. Use some variables and set them properly and check the value where necessary. For instance, on click you set FOOBAR = true and in blur you check if( FOOBAR ) and act on that.

You need to destroy one event see the demo
Hope this helps you.
jsfiddle.net/rkumar670/5a86V

clear radio buttons when click on text input

I have a group of 4 radio buttons followed by a text input, when users click on the text input field I am trying to clear all radio inputs. here is my code so far.
<input type="radio" name="radio"><label for="radio1">1</label>
<input type="radio" name="radio"><label for="radio2">2</label>
<input type="radio" name="radio"><label for="radio3">3</label>
<input type="radio" name="radio"><label for="radio4">4</label>
<input type="text" id="textInput">
<script>
$('#textinput').click(function () {
radio.checked = false;
});
</script>

You can use .prop() to set checked property of input rabio buttons. Also you have misspelled textInput while event binding
<script>
$('#textInput').click(function () {
$('input[name="radio"]').prop("checked", false);
});
</script>
DEMO

<script>
$('#textInput').click(function () {
$('input[type=radio]').removeAttr("checked");
});
</script>

Or you can try attr() method
$('#textInput').click(function () {
$('input[name="radio"]').attr('checked',false);
});
DEMO

I think the best way to modify your script block (without changing your html) is first by ensuring that the code runs on document ready, and also you should probably ensure that the event is focus, not click, in case someone is using a keyboard or alternate navigation:
$(function() {
$('#textInput').focus(function () {
$('input[name=radio]').prop("checked", false);
});
});
Though it's probably more likely that you want to only clear other selections if they actually enter some data in that field, you might want to instead do:
$(function() {
$('#textInput').on('input', function () {
if($(this).val().length > 0) {
$('input[name=radio]').prop("checked", false);
}
});
});

jquery select all checkboxes

I have a series of checkboxes that are loaded 100 at a time via ajax.
I need this jquery to allow me to have a button when pushed check all on screen. If more are loaded, and the button is pressed, to perhaps toggle all off, then pressed again toggle all back on.
This is what i have, obviously its not working for me.
$(function () {
$('#selectall').click(function () {
$('#friendslist').find(':checkbox').attr('checked', this.checked);
});
});
The button is #selectall, the check boxes are class .tf, and they all reside in a parent div called #check, inside a div called #friend, inside a div called #friendslist
Example:
<div id='friendslist'>
<div id='friend'>
<div id='check'>
<input type='checkbox' class='tf' name='hurr' value='durr1'>
</div>
</div>
<div id='friend'>
<div id='check'>
<input type='checkbox' class='tf' name='hurr' value='durr2'>
</div>
</div>
<div id='friend'>
<div id='check'>
<input type='checkbox' class='tf' name='hurr' value='durr3'>
</div>
</div>
</div>
<input type='button' id='selectall' value="Select All">

I know I'm revisiting an old thread, but this page shows up as one of the top results in Google when this question is asked. I am revisiting this because in jQuery 1.6 and above, prop() should be used for "checked" status instead of attr() with true or false being passed. More info here.
For example, Henrick's code should now be:
$(function () {
$('#selectall').toggle(
function() {
$('#friendslist .tf').prop('checked', true);
},
function() {
$('#friendslist .tf').prop('checked', false);
}
);
});

$('#friendslist .tf')
this selector will suit your needs

Use the jquery toggle function. Then you can also perform whatever other changes you may want to do along with those changes... such as changing the value of the button to say "check all" or "uncheck all".
$(function () {
$('#selectall').toggle(
function() {
$('#friendslist .tf').attr('checked', 'checked');
},
function() {
$('#friendslist .tf').attr('checked', '');
}
);
});

A very simple check/uncheck all without the need of loop
<input type="checkbox" id="checkAll" /> Check / Uncheck All
<input type="checkbox" class="chk" value="option1" /> Option 1
<input type="checkbox" class="chk" value="option2" /> Option 2
<input type="checkbox" class="chk" value="option3" /> Option 3
And the javascript (jQuery) accounting for "undefined" on checkbox value
** UPDATE - using .prop() **
$("#checkAll").change(function(){
var status = $(this).is(":checked") ? true : false;
$(".chk").prop("checked",status);
});
** Previous Suggestion - may not work **
$("#checkAll").change(function(){
var status = $(this).attr("checked") ? "checked" : false;
$(".chk").attr("checked",status);
});
OR with the suggestion from the next post using .prop() combined into a single line
$("#checkAll").change(function(){
$(".chk").attr("checked",$(this).prop("checked"));
});

This is how I toggle checkboxes
$(document).ready(function() {
$('#Togglebutton').click(function() {
$('.checkBoxes').each(function() {
$(this).attr('checked',!$(this).attr('checked'));
});
});
});

maybe try this:
$(function () {
$('#selectall').click(function () {
$('#friendslist .tf').attr('checked', this.checked);
});
});

<div class="control-group">
<input type="checkbox" class="selAllChksInGroup"> All
<input type="checkbox" value="NE"> Nebraska
<input type="checkbox" value="FL"> Florida
</div>
$(document).ready(function(){
$("input[type=checkbox].selAllChksInGroup").on("click.chkAll", function( event ){
$(this).parents('.control-group:eq(0)').find(':checkbox').prop('checked', this.checked);
});
});

I could not get this last example to work for me. The correct way to query the state of the checkbox is apparently :
var status = $(this).prop("checked");
and not
var status = $(this).attr("checked") ? "checked" : false;
as above.
See jQuery receiving checkbox status

It works for me (IE, Safari, Firefox) by just changing your this.checked to 'checked'.
$(function() {
$('#selectall').click(function() {
$('#friendslist').find(':checkbox').attr('checked', 'checked');
});
});

You may try this:
$(function () {
$('#selectall').click(function () {
$('#friendslist input:checkbox').attr('checked', checked_status);
});
});
//checked_status=true/false -as the case may be, or set it via a variable

assuming #selectall is a checkbox itself whose state you want copied to all the other checkboxes?
$(function () {
$('#selectall').click(function () {
$('#friendslist input:checkbox').attr('checked', $(this).attr('checked'));
});
});

try this
var checkAll = function(){
var check_all = arguments[0];
var child_class = arguments[1];
if(arguments.length>2){
var uncheck_all = arguments[2];
$('#'+check_all).click(function (){
$('.'+child_class).attr('checked', true);
});
$('#'+uncheck_all).click(function (){
$('.'+child_class).attr('checked', false);
});
$('.'+child_class).click(function (){
var checkall_checked = true;
$('.'+child_class).each(function(){
if($(this).attr('checked')!=true){
checkall_checked = false;
}
});
if(checkall_checked == true){
$('#'+check_all).attr('checked', true);
$('#'+uncheck_all).attr('checked', false);
}else{
$('#'+check_all).attr('checked', false);
$('#'+uncheck_all).attr('checked', true);
}
});
}else{
$('#'+check_all).click(function (){
$('.'+child_class).attr('checked', $(this).attr('checked'));
});
$('.'+child_class).click(function (){
var checkall_checked = true;
$('.'+child_class).each(function(){
if($(this).attr('checked')!=true){
checkall_checked = false;
}
});
$('#'+check_all).attr('checked', checkall_checked);
});
}
};
To "check all" and "uncheck all" is same checkbox
checkAll("checkall_id", "child_checkboxes_class_name");
To "check all" and "uncheck all" is separate checkbox
checkAll("checkall_id", "child_checkboxes_class_name", "uncheckall_id");

Here is how I achieved it.
function SelectAllCheckBoxes();
{
$('#divSrchResults').find(':checkbox').attr('checked', $('#chkPrint').is(":checked"));
}
The following fires the above line.
<input type=checkbox id=chkPrint onclick='SelectAllCheckBoxes();' />
On the click of chkPrint , every checkbox in the grid divSrchResults' is either checked or unchecked depending on the status of chkPrint.
Of course, if you need advanced functions like unchecking the titled checkbox when every other checkbox has been unchecked, you need to write another function for this.

I created a function that I use on all projects. This is just the initial draft, but maybe it will help:
Function:
function selectAll(wrapperAll, wrapperInputs) {
var selectAll = wrapperAll.find('input');
var allInputs = wrapperInputs.find('input');
console.log('Checked inputs = ' + allInputs.filter(':not(:checked)').length);
function checkitems(allInputs) {
//If all items checked
if (allInputs.filter(':not(:checked)').length === 0) {
console.log('Function: checkItems: All items checked');
selectAll.attr('checked', true);
} else {
console.log('Function: checkItems: Else all items checked');
selectAll.attr('checked', false);
}
}
checkitems(allInputs);
allInputs.on('change', function () {
checkitems(allInputs)
});
selectAll.on('change', function () {
if (this.checked) {
console.log('This checkbox is checked');
wrapperInputs.find(':checkbox').attr('checked', true);
} else {
console.log('This checkbox is NOT checked');
wrapperInputs.find(':checkbox').attr('checked', false);
}
});
}
It accepts the 2 parameters where the inputs are wrapped into and you cand use-it like this:
$(function () {
var wrapperAll = $('.selectallinput');
var wrapperInputs = $('.inputs');
selectAll(wrapperAll, wrapperInputs);
});
See demo: http://jsfiddle.net/cHD9z/

So "checked" is a crappy attribute; in many browsers it doesn't work as expected :-( Try doing:
$('#friendslist').find(':checkbox')
.attr('checked', this.checked)
.attr('defaultChecked', this.checked);
I know setting "defaultChecked" doesn't make any sense, but try it and see if it helps.

<input type="checkbox" onclick="toggleChecked(this.checked)"> Select / Deselect All
Now here are two versions of the toggleChecked function dependent on the semantics of your document. The only real difference is the jQuery selector for your list checkboxes:
1: All checkboxes have a class of “checkbox” (<input type=”checkbox” class=”checkbox” />)
function toggleChecked(status) {
$(".checkbox").each( function() {
$(this).attr("checked",status);
})
}
2: All the checkboxes are contained within a div with an arbitary id:
<div id="checkboxes">
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
</div>
In this case the function would look like this:
function toggleChecked(status) {
$("#checkboxes input").each( function() {
$(this).attr("checked",status);
})
Have fun!

This may work for both (checked/unchecked) selectall situations:
$(document).ready(function(){
$('#selectall').click(function () {
$("#friendslist .tf").attr("checked",function(){return $(this).attr("checked") ? false : true;});
});
});

The currently accepted answer won't work for jQuery 1.9+. The event handling aspect of the (rather heavily) overloaded .toggle() function was removed in that version, which means that attempting to call .toggle(function, function) will instead just toggle the display state of your element.
I'd suggest doing something like this instead:
$(function() {
var selectAll = $('#selectall');
selectAll.on('click', function(e) {
var checked = !(selectAll.data('checked') || false);
$('#friendslist .tf').prop('checked', checked);
selectAll.data('checked', checked);
});
});
That uses a regular click event handler, plus a data attribute to track the "toggled" status and invert it with each click.

Here's a basic jQuery plugin I wrote that selects all checkboxes on the page, except the checkbox/element that is to be used as the toggle. This, of course, could be amended to suit your needs:
(function($) {
// Checkbox toggle function for selecting all checkboxes on the page
$.fn.toggleCheckboxes = function() {
// Get all checkbox elements
checkboxes = $(':checkbox').not(this);
// Check if the checkboxes are checked/unchecked and if so uncheck/check them
if(this.is(':checked')) {
checkboxes.prop('checked', true);
} else {
checkboxes.prop('checked', false);
}
}
}(jQuery));
Then simply call the function on your checkbox or button element:
// Check all checkboxes
$('.check-all').change(function() {
$(this).toggleCheckboxes();
});
As you are adding and removing more checkboxes via AJAX, you may want to use this instead of .change():
// Check all checkboxes
$(document).on('change', '.check-all', function() {
$(this).toggleCheckboxes();
});

Develop Reference

JavaScript is the programming language of the Web.

Checkbox onchange event not firing - javascript

If the goal is to have only one checkbox checked, here is a jQuery solution: $(document).ready(function () { $('#one, #two').change(function (e) { if ($(this).prop('checked')) { $('#one, #two').not(this).prop('checked', false) } }); });

Related

jQuery-Events: How To Unbind Keyup Event If One Input Detected?

Add an onchange event listener to an html input field

How to stop event in javascript? [duplicate]

clear radio buttons when click on text input

jquery select all checkboxes

Categories

Resources