We Keep Coding

How do I check in javascript if my html checkbox is checked in html [duplicate]

I am building a mobile web app with jQuery Mobile and I want to check if a checkbox is checked. Here is my code.
<script type=text/javascript>
function validate(){
if (remember.checked == 1){
alert("checked") ;
} else {
alert("You didn't check it! Let me check it for you.")
}
}
</script>
<input id="remember" name="remember" type="checkbox" onclick="validate()" />
But for some reason or another it doesn't execute it.
Please help !
----EDIT-----
This is what I have for the moment.
<DIV data-role="content" data-theme="g">
<DIV class=ui-grid-g-login>
<FORM method=post action=[$=PROBE(266)/] data-theme="C">
<P>~DATA_ERROR~</P>
<div id="mail" data-role="fieldcontain">
<label for="mail">Email:*</label>
<input id="mail" name="mail" type="email" />
</div>
<div id="pass" data-role="fieldcontain">
<label for="pass">Paswoord:*</label>
<input id="pass" name="pass" type="password" />
</div>
<div id="remember" data-role="fieldcontain">
<label for="remember">Onthoud mij</label>
<input id="remember" name="remember" type="checkbox" onclick="validate()" />
</div>
<P><INPUT class=btn name=submit value=Login type=submit onclick="validate()"></P>
</FORM>
</DIV>
</DIV><!-- /content -->
<script type=text/javascript>
function validate(){
var remember = document.getElementById('remember');
if (remember.checked){
alert("checked") ;
}else{
alert("You didn't check it! Let me check it for you.")
}
}
</script>
----EDIT--
Solved it, the problem was that the fieldcontain was also named 'remember'

checked is a boolean property, so you can directly use it in an if condition
<script type="text/javascript">
function validate() {
if (document.getElementById('remember').checked) {
alert("checked");
} else {
alert("You didn't check it! Let me check it for you.");
}
}
</script>

Try this:
function validate() {
var remember = document.getElementById("remember");
if (remember.checked) {
alert("checked");
} else {
alert("You didn't check it! Let me check it for you.");
}
}
Your script doesn't know what the variable remember is. You need to get the element first using getElementById().

//HTML
<input type="checkbox" id="someID">
// JavaScript
const someCheckbox = document.getElementById('someID');
someCheckbox.addEventListener('change', e => {
if(e.target.checked === true) {
console.log("Checkbox is checked - boolean value: ", e.target.checked)
}
if(e.target.checked === false) {
console.log("Checkbox is not checked - boolean value: ", e.target.checked)
}
});
know more

This should allow you to check if element with id='remember' is 'checked'
if (document.getElementById('remember').is(':checked')

use like this
<script type=text/javascript>
function validate(){
if (document.getElementById('remember').checked){
alert("checked") ;
} else {
alert("You didn't check it! Let me check it for you.")
}
}
</script>
<input id="remember" name="remember" type="checkbox" onclick="validate()" />

If you are using this form for mobile app then you may use the required attribute html5.
you dont want to use any java script validation for this. It should work
<input id="remember" name="remember" type="checkbox" required="required" />

Use this below simple code:
https://jsfiddle.net/Divyesh_Patel/v7a4h3kr/7/
<input type="checkbox" id="check">
click
<button onclick="check()">button</button>
<script>
function check() {
if (document.getElementById('check').checked) {
alert("checked");
} else {
alert("Not checked.");
}
}
</script>

if (document.getElementById('remember').checked) {
alert("checked");
}
else {
alert("You didn't check it! Let me check it for you.");
}

This should work
function validate() {
if ($('#remeber').is(':checked')) {
alert("checked");
} else {
alert("You didn't check it! Let me check it for you.");
}
}

I am using this and it works for me with Jquery:
Jquery:
var checkbox = $('[name="remember"]');
if (checkbox.is(':checked'))
{
console.log('The checkbox is checked');
}else
{
console.log('The checkbox is not checked');
}
Is very simple, but work's.
Regards!

remember is undefined … and the checked property is a boolean not a number.
function validate(){
var remember = document.getElementById('remember');
if (remember.checked){
alert("checked") ;
}else{
alert("You didn't check it! Let me check it for you.")
}
}

You can use this simple and effective code using pure JS and jQuery.
using validate function as onclick attr
function validate(el) {
if (el.checked) {
alert("checked")
} else {
alert("unchecked")
}
}
<input id="remember" name="remember" type="checkbox" onclick="validate(this)" />
OR
using pure JS
document.addEventListener("DOMContentLoaded", function(event) {
//using pure Js code
let chk = document.getElementById("remember");
if (chk.checked) {
alert("checked")
}else{
alert("unchecked")
}
})
<input id="remember" name="remember" type="checkbox"/>
using jQuery
$(document).ready(function () {
//using jQuery code
$('#remember').on('change', function (e) {
if (e.currentTarget.checked) {
alert("checked")
} else {
alert("unchecked")
}
})
})
<input id="remember" name="remember" type="checkbox"/>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

Use this below simple code:
https://jsfiddle.net/Divyesh_Patel/v7a4h3kr/7/
<input type="checkbox" id="check">
click
<button onclick="check()">
button
</button>
<script>
function check() {
if (document.getElementById('check').checked) {
alert("checked");
} else {
alert("You didn't check it! Let me check it for you.");
}
}
</script>

The remember variable is undefined. so try this way:
function validate() {
var remember = document.getElementById("remember");
if (remember.checked) {
alert("checked");
} else {
alert("You didn't check it! Let me check it for you.");
}
}

You can try this:
if ($('#remember').is(':checked')){
alert('checked');
}else{
alert('not checked')
}

Try This
<script type="text/javascript">
window.onload = function () {
var input = document.querySelector('input[type=checkbox]');
function check() {
if (input.checked) {
alert("checked");
} else {
alert("You didn't check it.");
}
}
input.onchange = check;
check();
}
</script>

You can also use JQuery methods to accomplish this:
<script type="text/javascript">
if ($('#remember')[0].checked)
{
alert("checked");
}
</script>

The below will definitely work. updated 2022
<input onchange="isChecked()" type="checkbox" required="required"/>
<script type="text/javascript">
let ischeckvariable = false;
function isChecked() {
if (!ischeckvariable) {
ischeckvariable = true;
} else {
isckeckvariable = false;
}
}
</script>

making all input fields borders red when no one at least was filled in

I am not good enough with javascript. Simply I have a form with some input fields. The user has to fill in at least one of them. I had already found the right code to do this. This code tells the user there is an error using an alert message. But I want to make all input fields borders red instead of this alert message using the same code.
HTML
<form id="myform" action="" method="post">
<input name="destination" class="form-control" type="text" >
<input name="thingstodo" class="form-control" type="text">
<input name="gsearch" class="form-control" type="text">
<button type="submit" name="search">Search</button>
</form>
JavaScript
$(function(){
$("#myform").submit(function(){
var valid=0;
$(this).find('input[type=text]').each(function(){
if($(this).val() != "") valid+=1;
});
if(valid){
return true;
}
else {
alert("error: you must fill in at least one field");
return false;
}
});
});
Thanks

You can do it by setting the CSS style. This is done most easily with jQuery syntax.
$(function(){
$("#myform").submit(function(){
var valid = 0;
$(this).find('input[type=text]').each(function(){
if($(this).val() != "") {
valid++;
$(this).css("border-color", "initial");
}
else {
$(this).css("border-color", "red");
}
});
if (valid > 0) { return true; }
else { return false; }
});
});

Modify the code like so
$(function(){
$("#myform").submit(function(){
var valid=0;
$(this).find('input[type=text]').each(function(){
if($(this).val() != "") valid+=1;
else
$(this).style.border = "solid 1px red"
});
if(valid){
return true;
}
else {
return false;
}
});
});

How about this ?
$(function(){
$("#myform").submit(function(){
var dirty = false;
$('input[type=text]').each(function(){
if($(this).val().length){
dirty = true;
}
});
if(!dirty){
$('input[type=text]').each(function(){
$(this).css('border','1px solid red');
});
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myform" action="" method="post">
<input name="destination" class="form-control" type="text" >
<input name="thingstodo" class="form-control" type="text">
<input name="gsearch" class="form-control" type="text">
<button type="submit" name="search">Search</button>
</form>

how to validate multiple textboxes on button click using jquery

In my application I have five textboxes.
When submit button click I want to validate these textboxes.
Validation should be at least 3 textboxes should have value in it.
Old way is using jQuery each loop we can check but is there any other way to do it ?
$("#submitBtn").on("click", function(){
var count = 0;
$(".textboxesDiv input").each(function () {
if($(this).val() != "" && $(this).val() != null && $(this).val() != undefined){
count++;
}
});
if(count > 2 )
{
alert("3 or more");
}
else{
alert("lessa than 3");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="textboxesDiv">
<input type="text" id="textbox1" >
<input type="text" id="textbox2" >
<input type="text" id="textbox3" >
<input type="text" id="textbox4" >
<input type="text" id="textbox5" >
</div>
<input type="submit" id ="submitBtn" name="button"/>
https://jsfiddle.net/7Lmgbbng/1/

Check this example
http://jsfiddle.net/ggChris/mfbaxkfp/
<input id="AccountText" type="text" name="AccountText" value="" class="form-control" placeholder="Name" required=''/>
<input class="button" type="submit" value="submit">
$(document).ready(function(){
$('.button').click(function(){
if ($('input#AccountText').val() == ""){
alert('Please complete the field');
}
});
});
or you can use jquery validation
https://jqueryvalidation.org/

Disable submit button until all form inputs have data

I'm trying to disable the submit button until all inputs have some data. Right now the button is disabled, but it stays disabled after all inputs are filled in. What am I doing wrong?
$(document).ready(function (){
validate();
$('input').on('keyup', validate);
});
function validate(){
if ($('input').val().length > 0) {
$("input[type=submit]").prop("disabled", false);
} else {
$("input[type=submit]").prop("disabled", true);
}
}

Here's a modification of your code that checks all the <input> fields, instead of just the first one.
$(document).ready(function() {
validate();
$('input').on('keyup', validate);
});
function validate() {
var inputsWithValues = 0;
// get all input fields except for type='submit'
var myInputs = $("input:not([type='submit'])");
myInputs.each(function(e) {
// if it has a value, increment the counter
if ($(this).val()) {
inputsWithValues += 1;
}
});
if (inputsWithValues == myInputs.length) {
$("input[type=submit]").prop("disabled", false);
} else {
$("input[type=submit]").prop("disabled", true);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="submit" value="Join">

Vanilla JS Solution.
In question selected JavaScript tag.
HTML Form:
<form action="/signup">
<div>
<label for="username">User Name</label>
<input type="text" name="username" required/>
</div>
<div>
<label for="password">Password</label>
<input type="password" name="password" />
</div>
<div>
<label for="r_password">Retype Password</label>
<input type="password" name="r_password" />
</div>
<div>
<label for="email">Email</label>
<input type="text" name="email" />
</div>
<input type="submit" value="Signup" disabled="disabled" />
</form>
JavaScript:
var form = document.querySelector('form')
var inputs = document.querySelectorAll('input')
var required_inputs = document.querySelectorAll('input[required]')
var register = document.querySelector('input[type="submit"]')
form.addEventListener('keyup', function(e) {
var disabled = false
inputs.forEach(function(input, index) {
if (input.value === '' || !input.value.replace(/\s/g, '').length) {
disabled = true
}
})
if (disabled) {
register.setAttribute('disabled', 'disabled')
} else {
register.removeAttribute('disabled')
}
})
Some explanation:
In this code we add keyup event on html form and on every keypress check all input fields. If at least one input field we have are empty or contains only space characters then we assign the true value to disabled variable and disable submit button.
If you need to disable submit button until all required input fields are filled in - replace:
inputs.forEach(function(input, index) {
with:
required_inputs.forEach(function(input, index) {
where required_inputs is already declared array containing only required input fields.
JSFiddle Demo: https://jsfiddle.net/ydo7L3m7/

You could try using jQuery Validate
http://jqueryvalidation.org/
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js"></script>
And then do something like the following:
$('#YourFormName').validate({
rules: {
InputName1: {
required: true
},
InputName2: { //etc..
required: true
}
}
});

Refer to the sample here.
In this only input of type="text" has been considered as described in your question.
HTML:
<div>
<form>
<div>
<label>
Name:
<input type="text" name="name">
</label>
</div>
<br>
<div>
<label>
Age:
<input type="text" name="age">
</label>
</div>
<br>
<div>
<input type="submit" value="Submit">
</div>
</form>
</div>
JS:
$(document).ready(function () {
validate();
$('input').on('keyup check', validate);
});
function validate() {
var input = $('input');
var isValid = false;
$.each(input, function (k, v) {
if (v.type != "submit") {
isValid = (k == 0) ?
v.value ? true : false : isValid && v.value ? true : false;
}
if (isValid) {
$("input[type=submit]").prop("disabled", false);
} else {
$("input[type=submit]").prop("disabled", true);
}
});
}

Try to modify your function like this :
function validate(){
if ($('input').val() != '') {
$("input[type=submit]").prop("disabled", false);
} else {
$("input[type=submit]").prop("disabled", true);
}
}
and place some event trigger or something like onkeyup in jquery.But for plain js, it looks like this :
<input type = "text" name = "test" id = "test" onkeyup = "validate();">
Not so sure of this but it might help.

Here is a dynamic code that check all inputs to have data when wants to submit it:
$("form").submit(function(e) {
var error = 0;
$('input').removeClass('error');
$('.require').each(function(index) {
if ($(this).val() == '' || $(this).val() == ' ') {
$(this).addClass('error');
error++;
}
});
if (error > 0) {
//Means if has error:
e.preventDefault();
return false;
} else {
return true;
}
});
.error {
border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<form>
<form action="google.com">
<input type="text" placeholder="This is input #1" class="require" />
<input type="text" placeholder="This is input #2" class="require" />
<input type="submit" value="submit" />
</form>
</form>
Now you see there is a class called require, you just need to give this class to inputs that have to have value then this function will check if that input has value or not, and if those required inputs are empty Jquery will prevent to submit the form!

Modify your code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="submit" value="Join">
<script>
$(document).ready(function (){
validate();
$('input').on('keyup', validate);
});
function validate(){
$("input[type=text]").each(function(){
if($(this).val().length > 0)
{
$("input[type=submit]").prop("disabled", false);
}
else
{
$("input[type=submit]").prop("disabled", true);
}
});
}
</script>

function disabledBtn(_className,_btnName) {
var inputsWithValues = 0;
var _f = document.getElementsByClassName(_className);
for(var i=0; i < _f.length; i++) {
if (_f[i].value) {
inputsWithValues += 1;
}
}
if (inputsWithValues == _f.length) {
document.getElementsByName(_btnName)[0].disabled = false;
} else {
document.getElementsByName(_btnName)[0].disabled = true;
}
}
<input type="text" class="xxxxx" onKeyUp="disabledBtn('xxxxx','fruit')"><br>
<input type="text" class="xxxxx" onKeyUp="disabledBtn('xxxxx','fruit')"><br>
<input type="text" class="xxxxx" onKeyUp="disabledBtn('xxxxx','fruit')"><br>
<input type="submit" value="Join" id="yyyyy" disabled name="fruit">

Disable input fields in Bootstrap

I am having 3 input fields in Bootstrap, if any one of the input field is filled, I want to disable other two.
Lets say I am having A,B,C input boxes.
If A is filled then B & C will become disabled or readonly and vice versa.
Also if I delete value from A then B & C again become enabled. As B & C was also not filled.

You simply do a jQuery function
// #your_filled_input is for the id of the input
$("#your_filled_input").keyup(function() {
if ($("#your_filled_input").val().length >= 0) {
$("#your_first_other_field" ).attr('disabled', 'disabled');
$("#your_second_other_field").attr('disabled', 'disabled');
}
});

$("#fieldA").keyup(function() {
if ($("#fieldA").val().length > 0) {
$("#fieldB").attr('disabled', 'disabled');
$("#fieldC").attr('disabled', 'disabled');
} else {
$('#fieldB').removeAttr('disabled');
$('#fieldC').removeAttr('disabled');
}
});
$("#fieldB").keyup(function() {
if ($("#fieldB").val().length > 0) {
$("#fieldA").attr('disabled', 'disabled');
$("#fieldC").attr('disabled', 'disabled');
} else {
$('#fieldA').removeAttr('disabled');
$('#fieldC').removeAttr('disabled');
}
});
$("#fieldC").keyup(function() {
if ($("#fieldC").val().length > 0) {
$("#fieldB").attr('disabled', 'disabled');
$("#fieldA").attr('disabled', 'disabled');
} else {
$('#fieldB').removeAttr('disabled');
$('#fieldA').removeAttr('disabled');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' id='fieldA' />
<input type='text' id='fieldB' />
<input type='text' id='fieldC' />

JSFIDDLE
The input fields
<input type='text' id='a' class="inputfield" disabled="false" />
<input type='text' id='b' class="inputfield" disabled="false" />
<input type='text' id='c' class="inputfield" disabled="false" />
The jQuery code
$(document).ready(function(){
$('.inputfield').prop('disabled', false);
$('.inputfield').change(function(){
var a = $('#a').val();
var b = $('#b').val();
var c = $('#c').val();
if((a).length > 0){
$('#b').prop('disabled', true);
$('#c').prop('disabled', true);
}
if((b).length > 0){
$('#a').prop('disabled', true);
$('#c').prop('disabled', true);
}
if((c).length > 0){
$('#a').prop('disabled', true);
$('#b').prop('disabled', true);
}
});
});

You can use this :
<input type="text" class="singleedit"/>
<input type="text" class="singleedit"/>
<input type="text" class="singleedit"/>
With this JS
$('.singleedit').keyup(function() {
$(this).removeAttr('readonly');
$('.singleedit').not(this).each(function(){
$(this).val('').attr('readonly','readonly');
});
})