How would I get the status of a checkbox without having to call a function.
This is for a specific complex validation that my form needs.
I always want to keep listening to its status.
Things I will need.
Its status when checked
Status when unchecked
I know this works
<input type="checkbox" onchange="showAddress3(this)" id="askAddress3">Call my friend to get the address
<script type="text/javascript">
function showAddress3() {
if ($('#askAddress3').is(":checked")) {
alert("Checkbox is checked.");
} else if ($('#askAddress3').is(":not(:checked)")) {
alert("Checkbox is unchecked.");
}
}
</script>
I Want to check its status without calling a function on it change event, something like
<input type="checkbox" id="askAddress3">Call my friend to get the address
<script type="text/javascript">
if ($('#askAddress3').is(":checked")) {
alert("Checkbox is checked.");
} else if ($('#askAddress3').is(":not(:checked)")) {
alert("Checkbox is unchecked.");
}
</script>
This is only working when Page load, and does not work when I toggle it. Any suggestions or workarounds will be very helpful.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="askAddress3">Call my friend to get the address
<script type="text/javascript">
$('#askAddress3').on('change', function() {
if ($('#askAddress3').is(":checked")) {
alert("Checkbox is checked.");
} else if ($('#askAddress3').is(":not(:checked)")) {
alert("Checkbox is unchecked.");
}
});
</script>
I thing the below is what you are looking for?
To trigger the change without hard coding onchange='' in the input tag?
$("input[type='checkbox']").on("change", function() {
if ($('#askAddress3').is(":checked")) {
alert("Checkbox is checked.");
} else if ($('#askAddress3').is(":not(:checked)")) {
alert("Checkbox is unchecked.");
}
}) ;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="askAddress3">Call my friend to get the address
Related
First Question: On W3 HTML Validator I get the following error:
Attribute value not allowed on element input at this point.
But, in my code, I am using the 'value' to change images so how could I fix this?
Second question: I need the image to remain the same even when I refresh. I am new to Javascript, but I know I need to utilise cookies or local storage in some way. Can someone help with this?
$(document).ready(function() {
$("#button").on("click", function() {
$("#collapse").slideToggle("slow");
if ($(this).val() == "Hide") {
$(this).val("Show");
$(this).attr("src","https://www.gravatar.com/avatar/2e83e2d35f0b889da7d5905c7bf574c2?s=32&d=identicon&r=PG&f=1");
} else {
$(this).val("Hide");
$(this).attr("src","https://www.gravatar.com/avatar/2e83e2d00f0b889da7d5905c7bf574c2?s=32&d=identicon&r=PG&f=1");
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="image" value="Hide" id="button" src="https://www.gravatar.com/avatar/2e83e2d00f0b889da7d5905c7bf574c2?s=32&d=identicon&r=PG&f=1"></button>
<div id="collapse">
Hello
</div>
If you just want to make the HTML valid, the simplest tweak would be to use a class or data attribute instead.
$(document).ready(function() {
$("#button").on("click", function() {
$("#collapse").slideToggle("slow");
if ($(this).data('status') == "Hide") {
$(this).data('status', "Show");
$(this).attr("src","https://www.gravatar.com/avatar/2e83e2d35f0b889da7d5905c7bf574c2?s=32&d=identicon&r=PG&f=1");
} else {
$(this).data('status', "Hide");
$(this).attr("src","https://www.gravatar.com/avatar/2e83e2d00f0b889da7d5905c7bf574c2?s=32&d=identicon&r=PG&f=1");
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="image" data-status="Hide" id="button" src="https://www.gravatar.com/avatar/2e83e2d00f0b889da7d5905c7bf574c2?s=32&d=identicon&r=PG&f=1"></button>
<div id="collapse">
Hello
</div>
To persist the value, retrieve the status on pageload and run the handler
const initialStatus = localStorage.imageStatus || 'Hide';
$('#button').data('status', initialStatus);
$('#button').click();
and set it after a change
localStorage.imageStatus = $('#button').data('status');
i have tried this:
function stickyheaddsadaer() {
$("#page-header-inner").addClass("sticky");
}
<input type="checkbox" name="TT_sticky_header" id="TT_sticky_header_function"
value="{TT_sticky_header}" onclick="stickyheaddsadaer()"/>
so when i click checkbox, it just nothing happens....
but when i try this:
function stickyheaddsadaer() {
alert("I am an alert box!");
}
then works...
can you please help me ? I need to activate javasript function by checkbox
and when the js function is actived it add class to the div
Thank you
Better to use onchange event and check inside function if checked or not
function stickyheaddsadaer(obj) {
if($(obj).is(":checked")){
alert("Yes checked"); //when checked
$("#page-header-inner").addClass("sticky");
}else{
alert("Not checked"); //when not checked
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="TT_sticky_header" id="TT_sticky_header_function" value="{TT_sticky_header}" onchange="stickyheaddsadaer(this)"/>
HTML
<input type="checkbox" id="switch" onclick="change()">
JS
function change() {
var decider = document.getElementById('switch');
if(decider.checked){
alert('check');
} else {
alert('unchecked');
}
}
function checkFluency(){
var checkbox = document.getElementById('fluency');
if (checkbox.checked != false) {
alert("Checkbox checked")
}else{
alert("Not Checked")
}
}
<input type="checkbox" onclick="checkFluency()" id="fluency" />
So, my goal is this: if the checkbox is checked by the user, do something (let's say just an alert). Here's my code, that is not working:
function validate() {
if (document.getElementById('LetterNeed').checked) {
alert("checked");
} else {
alert("You didn't check it! Let me check it for you.");
}
}
<input type="checkbox" name="LetterNeed" id="LetterNeed">Not important</span>
Thanks for your help!
Call the validate function on change of the checkbox state.
<input type="checkbox" name="LetterNeed" id="LetterNeed" onchange="return validate()">Not important</span>
// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
OR
document.getElementById('LetterNeed').addEventListener('change', validate);
DEMO
Old Approach
Call the validate() function in the <input> tag
function validate() {
if (document.getElementById('LetterNeed').checked) {
alert("checked");
} else {
alert("You didn't check it! Let me check it for you.");
}
}
<input type="checkbox" name="LetterNeed" id="LetterNeed" onclick="validate()">Not important</span>
Event Handling approach
function validate() {
if (this.checked) {
alert("checked");
} else {
alert("You didn't check it! Let me check it for you.");
}
}
document.getElementById('LetterNeed').addEventListener('click', validate);
<input type="checkbox" name="LetterNeed" id="LetterNeed"><span>Not important</span>
on the other hand you can add eventlistener on DOMContentLoaded as below:
document.addEventListener('DOMContentLoaded', function () {
document.querySelector('#LetterNeed').addEventListener('change', validate);
});
A function to validate
function validate(e){
if(e.target.checked)
{
alert("Checked");
}
else{
alert("Not checked");
}
}
try these changes :
function validate(aCheckBox) {
if (aCheckBox.checked) {
alert("checked");
} else {
alert("You didn't check it! Let me check it for you.");
}
}
<input type="checkbox" name="LetterNeed" id="LetterNeed" onclick="validate(this)">Not important</input>
If i write some thing in input field and then i pressed enter then it should alert the specific value.Here is the code. please help me
<html>
<input type="text" class="searchfld" id='input' onchange="gotothatpost(this.value)"onkeyup="ajxsrch(this.value,getAscii())">
</html>
<script>
function ajxsrch(str,asci)
{
if(asci==13)
{
alert("You pressed enter");
}
else
{
do something;
}
}
</script>
I am assuming you want us to define the getAscii() function for you. Using code partially modified from this answer, the following example should work.
<html>
<input type="text" class="searchfld" id='input' onkeyup='ajxsrch(this.value, getAscii(event))'>
<script>
function getAscii(e) {
if (window.event){ // IE
return e.keyCode;
}else {
// Netscape/Firefox/Opera
return e.which;
}
}
function ajxsrch(str,asci)
{
if(asci==13)
{
alert("You pressed enter");
}
}
</script>
</html>
<tr id="tr99"><td>......</td></tr>
<input type="checkbox" onclick="toggletr(this);" value="val" id="cbox" />
The javascript:
$(document).ready(function() {
function toggletr(obj)
{
if(obj.checked)
$(#tr99).hide();
else
$(#tr99).show();
}
hi.this is my code that runs in add page of staff.
if user is in edit mode the value that value is checked in the code
i mean to say in .cs .
checkbox.checked ="true" means . that time i need to make that tr value "tr99" is visiable true
if checkbox is not checked then make the tr as hide.
Take the toggletr method out of the "$(document).ready(function() {"
<script type="text/javascript">
function toggletr(obj){
if(obj.checked)
$('#tr99').hide();
else
$('#tr99').show();}
</script>
<tr id="tr99"><td>......</td></tr>
<input type="checkbox" onclick="toggletr(this);" value="val" id="cbox" />
I think that you want this to happen
$(document).ready(function() {
function toggletr(obj){
if(obj.checked){
$("#tr99").show();
$("#cbox").attr("value", "tr99");
}else {
$("#tr99").hide();
}
}
});
Is that it? You can also add the function directly
function toggletr(obj){
if(obj.checked){
$("#tr99").show();
$("#cbox").attr("value", "tr99");
}else {
$("#tr99").hide();
}
}
If I were you I'd set the onclick method to be an event handler:
$(function(){
$('#cbox').click(function(){
if(this.checked){
$("#tr99").show();
$("#cbox").attr("value", "tr99");
}else {
$("#tr99").hide();
}
});
});
If you wanted to do pure jQuery and not mix in normal Javascript (obj.checked)....
$(function(){
$("#cbox").click(function(){
if($(this).is(":checked")){
$("#tr99").show();
}else{
$("#tr99").hide();
}
});
});