I noticed that the "change" event only fires one event when the element is checked. But does not seem to fire any event when unchecked, or do I miss something?
I would like to do something on "uncheck" but that does never trigger.
Ideally, I do not want to save the inputs in an array and on change check which one is checked or not.
Here is an example, as you can see, "do something" never get’s fired:
document.querySelector("input").addEventListener("change", function(ev) {
console.log(ev.target.checked);
if(!ev.target.checked) console.log("do something");
});
<input type="radio" name="type" checked="checked" value="guest" />
<input type="radio" name="type" value="walk_in" />
This seems so basic… maybe I overlooked something?
Thank you!
It only validate at the time of targeted element, not with other Element .Better use for Each function they validated all element change
document.querySelectorAll("input").forEach(function(a) {
a.addEventListener("change", function() {
console.log(this.checked);
console.log("checked radio value="+this.value);
if (!this.checked) console.log("do something");
})
})
<input type="radio" name="type" checked="checked" value="guest" />
<input type="radio" name="type" value="walk_in" />
Or if you need validate check and Uncheck*(like toggle)* use with type=checkbox instead of radio .
Radio button not have toggle checkbox have toggle
document.querySelector("input").addEventListener("change", function(ev) {
console.log(ev.target.checked);
if (!ev.target.checked) console.log("do something");
});
<input type="checkbox" name="type" checked="checked" value="guest" />
<input type="checkbox" name="type" value="walk_in" />
Related
I have been attempting to allow radio buttons to be deselected using jQuery, but I am running into issues with the prop function. When this code runs, my conditional ($(e.currentTarget).prop('checked')) always evaluates to true.
Here is a fiddle which demonstrates my issue: Jsfiddle
FYI: I am using jQuery 1.8.2, and I cannot update it because it is a legacy project with many dependencies. Also, I MUST use radio buttons per the client's request.
Javascript:
$("input[name=optionMedia]").click(function(e) {
if ($(e.currentTarget).prop('checked')) {
$(e.currentTarget).prop('checked', false);
}
});
Html:
<input class="bigSizeInput" type="radio" id="audioVideo" name="optionMedia" value="1"/>
<input class="bigSizeInput" type="radio" id="showReel" name="optionMedia" value="2" />
You can do it like this
$('input.bigSizeInput').mouseup(function() {
if ($(this).is(':checked')) {
setTimeout(function() {
$('input.bigSizeInput:checked').prop('checked', false);
}, 1)
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="bigSizeInput" type="radio" id="audioVideo" name="optionMedia" value="1" />
<input class="bigSizeInput" type="radio" id="showReel" name="optionMedia" value="2" />
This is because checked is a property. If its there it is true, if its not it is not true. Hence you either should switch to a checkbox or use
$("..").removeProp('checked')
Using checkbox to check/uncheck is better than radio button. But if you want to use radio button, you need to check if radio is checked, copy it using and remove checked attribute of copied element and then insert it after target radio. At the end remove original radio.
$(document).on("mousedown", "input[name=optionMedia]", function(e) {
if (this.checked)
$(this).clone().prop('checked', false).insertAfter(this).end().remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<input class="bigSizeInput" type="radio" id="audioVideo" name="optionMedia" value="1"/>
<input class="bigSizeInput" type="radio" id="showReel" name="optionMedia" value="2" />
I have 2 checkboxes that one selects the other.
Checkbox1 has a change event. However, when I check checkbox1 via checkbox2, the event on checkbox1 is not being triggered.
See jsfiddle.
$(document).ready(function() {
$("#check1").change(arrangeWindow);
$("#check2").click(function(){
$("#check1").prop("checked", this.checked);
});
});
function arrangeWindow() {
console.log("Missing my baby");
}
<input type="checkbox" id="check1" value="value" />
<label for="chk">Checkbox 1</label>
<input type="checkbox" id="check2" value="value" />
<label for="chk">Checkbox 2 </label>
I can call arrangeWindow from check2 click function, but that's not smart.
How can I trigger the change event upon changing it via jquery?
Programmatically changing the checked property does not raise an event on the element. If you need that behaviour you can use trigger('change') manually:
$(document).ready(function() {
$("#check1").change(arrangeWindow);
$("#check2").change(function(){
$("#check1").prop("checked", this.checked).trigger('change');
});
});
function arrangeWindow() {
console.log("Missing my baby");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="check1" value="value" />
<label for="chk">Checkbox 1</label>
<input type="checkbox" id="check2" value="value" />
<label for="chk">Checkbox 2 </label>
Also note that you should always use the change event when dealing with checkboxes and radios for accessibility reasons, as that event can be fired on the element using the keyboard.
I use js like below to prevent click on some radio button.
It's work totally fine in Chrome.
But on IE8 It's still can't check but default value was disappear when click other radio in group.
$("body").on("change", ".readonly", function () {
return false;
});
How can i make radio readonly and also work on IE8?
<input type="radio" readonly /> does not work, but using click does partly work. If you have two radios with the same name, IE will however still uncheck the checked one regardless with this code
$("body").on("click", ".readonly", function(e) {
e.preventDefault();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<input name="rad" type="radio" class="readonly" />
<input name="rad" type="radio" checked class="readonly" />
Here is a solution: https://stackoverflow.com/a/5437904/295783
$(function() {
$(':radio:not(:checked)').attr('disabled', true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<input name="rad" type="radio" class="readonly" />
<input name="rad" type="radio" checked class="readonly" />
I have this javascript code
// Listen for click on toggle checkbox
$('#select-all').click(function(event) {
if(this.checked) {
// Iterate each checkbox
$(':checkbox').each(function() {
this.checked = true;
});
}
});
And I have this
<form action="" method="POST">
Toggle All :
<input type="checkbox" name="select-all" id="select-all" />
then at my table I have multiple checkbox
<input type="checkbox" name="checkbox-1" id="checkbox-1" value="1"> Select
<input type="checkbox" name="checkbox-2" id="checkbox-2" value="2"> Select
<input type="checkbox" name="checkbox-3" id="checkbox-3" value="3"> Select
<input type="checkbox" name="checkbox-4" id="checkbox-4" value="4"> Select
When I click on toggle all, it does not check checkbox-1 to checkbox-4
What went wrong in my javascript code.
Thanks!! I want to actually do a function that will send all the value of checkbox1-4 by post when they are checked on form submit.
Simply do like this.
$('#select-all').click(function(event) {
$(':checkbox').prop("checked", this.checked);
});
You do not need to loop through each checkbox to check all.
Demo
Wrap the code in dom ready if your script is in head tag
$(document).ready(function() {
$('#select-all').click(function(event) {
$(':checkbox').prop("checked", this.checked);
});
});
I'm not so familiar with Javascript and I know this to be a very easy question, but I can't figure out where I'm going wrong.
I'm trying to disable two input fields unless a radio button with the id "custom" is selected.
HTML
<input type="radio" name="period" value="week" /> Weekly
<input type="radio" name="period" value="fortnight" /> Fortnightly
<input type="radio" name="period" value="month" /> Monthly
<input type="radio" name="period" value="quarter" /> Quarterly
<input type="radio" name="period" value="year" /> Annually
<input type="radio" name="period" id="custom" value="one-time" onchange="datedis()"/
<input type="date" name="from" disabled /> to <input type="date" name="to" disabled />
Javascript
function datedis() {
if(document.getElementsById("custom").checked) {
document.getElementsByName("from").disabled = false;
document.getElementsByName("to").disabled = false;
} else {
document.getElementsByName("from").disabled = true;
document.getElementsByName("to").disabled = true;
}
}
Here is my code in JSFiddle.
Multiple issues:
Use onclick instead of onchange, and make sure to assign the event handler to all radio buttons, not just custom, otherwise clicking away from custom will not disable the input field.
See also: OnChange event handler for radio button (INPUT type="radio") doesn't work as one value
It's getElementById, not getElementsById.
There's no document.getElementByName.
In jsfiddle, define a function with window.foo = function() {...}, not function foo() {...} (because that code is embedded in onload).
FYC: http://jsfiddle.net/MEsGH/