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>
Related
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
This question already has answers here:
How can I check whether a radio button is selected with JavaScript?
(29 answers)
Closed 5 years ago.
Hey all I'm stumped on rewriting a function from jQuery to Javascript. The function I currently have written works great but the only issue is, is that it has to be written in plain Javascript. Here is the function I have written:
function checkFunc() {
if ($('input[type="radio"]:checked').length === 0) alert("Not checked");
else alert("Checked");
}
I need the function to work the same way it does now but I just need it in Javascript! Any help is appreciated. Thanks!
Simply do with document.querySelectorAll
function checkFunc() {
if (document.querySelectorAll('input[type="radio"]:checked').length === 0) alert("Not checked");
else alert("Checked");
}
checkFunc()
<input type="radio" checked>
<input type="radio">
var radioBtn = document.getElementById('radioBtn');
function check() {
if(radioBtn.checked) {
alert('checked')
} else {
alert('Not Checked')
}
}
<input type="radio" id="radioBtn" />
<button onclick="check()">Check For Checked</button>
Try this one :-
function checkFunc() {
if (!$("input[type='radio']:checked").val()) {
alert("Not checked")
} else {
alert("Checked");
}
}
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" />
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();
}
});
});