We Keep Coding

How to handle the conditional check box selection in JavaScript?

We have three checkboxes as Left, Right, Both.
When selecting Left and Right, Both should be disabled.
However, on checking the right and left; checkbox for Both is not disabling. (or) alert('Hello 1') is not firing.
document.getElementById('Left').disabled = false;
var isLeft = document.getElementById('Left').checked;
document.getElementById('Right').disabled = false;
var isRight = document.getElementById('Right').checked;
document.getElementById('Both').disabled = false;
var isBoth = document.getElementById('Both').checked;
if (isLeft == true && isRight == true)
{
alert('Hello 1');
document.getElementById('Both').checked = false;
document.getElementById('Both').disabled = true;
}
Below is the original code in my JavaScript file
if ($("input:radio[name='Swelling']:checked").length > 0) {
var isChecked = document.getElementById("SwellingYes").checked;
if (isChecked === true)
{
document.getElementById('Left').disabled = false;
let isLeft = document.getElementById('Left').checked;
document.getElementById('Right').disabled = false;
let isRight = document.getElementById('Right').checked;
document.getElementById('Both').disabled = false;
let isBoth = document.getElementById('Both').checked;
if (isLeft && isRight) {
alert('Hello 1');
document.getElementById('Both').checked = false;
document.getElementById('Both').disabled = true;
}
if (isBoth) {
document.getElementById('Left').checked = false;
document.getElementById('Right').checked = false;
document.getElementById('Left').disabled = true;
document.getElementById('Right').disabled = true;
}
}
}

You need to listen on each checkbox's change event, then run your code, like so:
document.addEventListener('DOMContentLoaded', function () {
Array.prototype.slice.call(document.querySelectorAll('input[type="checkbox"]')).forEach(function (checkbox) {
checkbox.addEventListener('change', function () {
document.getElementById('Left').disabled = false;
var isLeft = document.getElementById('Left').checked;
document.getElementById('Right').disabled = false;
var isRight = document.getElementById('Right').checked;
document.getElementById('Both').disabled = false;
var isBoth = document.getElementById('Both').checked;
if (isLeft == true && isRight == true) {
alert('Hello 1');
document.getElementById('Both').checked = false;
document.getElementById('Both').disabled = true;
}
});
});
});
Left:
<input type="checkbox" id="Left" />
Right:
<input type="checkbox" id="Right" />
Both:
<input type="checkbox" id="Both" />
If you are only supporting modern browsers, you can use a bit of syntactic sugar here as well:
document.addEventListener('DOMContentLoaded', () => {
[...document.querySelectorAll('input[type="checkbox"]')].forEach((checkbox) => {
checkbox.addEventListener('change', () => {
document.getElementById('Left').disabled = false;
let isLeft = document.getElementById('Left').checked;
document.getElementById('Right').disabled = false;
let isRight = document.getElementById('Right').checked;
document.getElementById('Both').disabled = false;
let isBoth = document.getElementById('Both').checked;
if (isLeft == true && isRight == true) {
alert('Hello 1');
document.getElementById('Both').checked = false;
document.getElementById('Both').disabled = true;
}
});
});
});
Left:
<input type="checkbox" id="Left" />
Right:
<input type="checkbox" id="Right" />
Both:
<input type="checkbox" id="Both" />
If you wanted to also disable Left and Right, when Both were checked, you could do that, furthermore, it would be wise to not keep querying the dom for your elements, and rather store them inside variables:
document.addEventListener('DOMContentLoaded', () => {
let leftBox = document.getElementById('Left');
let rightBox = document.getElementById('Right');
let bothBox = document.getElementById('Both');
[...document.querySelectorAll('input[type="checkbox"]')].forEach((checkbox) => {
checkbox.addEventListener('change', () => {
leftBox.disabled = false;
let isLeft = leftBox.checked;
rightBox.disabled = false;
let isRight = rightBox.checked;
bothBox.disabled = false;
let isBoth = bothBox.checked;
if (isLeft && isRight) {
bothBox.checked = false;
bothBox.disabled = true;
}
if (isBoth) {
leftBox.checked = false;
rightBox.checked = false;
leftBox.disabled = true;
rightBox.disabled = true;
}
});
});
});
Left:
<input type="checkbox" id="Left" />
Right:
<input type="checkbox" id="Right" />
Both:
<input type="checkbox" id="Both" />

I'm not sure if this should be a comment or not, but your code only checks to see if it's checked or not once, on page load. If you want it to work properly, you may want to have an event attached or add a loop?

How to disable a submit button with vanilla javaScript?

I don't want the submit button to be enabled if the default values of the drop-downs are present.
This is the portion of my code which relates to my problem:
function checkSelect(select) {
if (select.value == '-- select an option --') submit.disabled = true;
else submit.disabled = false;
}
(function() {
if (checkSelect(starting)) {
starting.addEventListener('change', function(e) {
startingEventVal = returnAirPort(e.srcElement.value);
console.log('startingEventVal', startingEventVal);
});
}
if (checkSelect(destination)) {
starting.addEventListener('change', function(e) {
startingEventVal = returnAirPort(e.srcElement.value);
console.log('startingEventVal', startingEventVal);
});
}
})();
And this is all of my code:
(function() {
var starting = document.getElementById('starting'),
destination = document.getElementById('destination'),
submit = document.getElementById('submit'),
airportNames = Object.keys(IntentMedia.Airports.airport_distances()),
startingEventVal,
destinationEventVal;
function appendToUL(ul, element) {
var optionEL = document.createElement('option');
optionEL.text = element;
optionEL.value = element;
return ul.appendChild(optionEL);
}
function returnAirPort(airport) {
return airport;
}
function checkSelect(select) {
if (select.value == '-- select an option --') submit.disabled = true;
else submit.disabled = false;
}
airportNames.forEach(function(element) {
appendToUL(starting, element);
appendToUL(destination, element);
});
(function() {
if (checkSelect(starting)) {
starting.addEventListener('change', function(e) {
startingEventVal = returnAirPort(e.srcElement.value);
console.log('startingEventVal', startingEventVal);
});
}
if (checkSelect(destination)) {
starting.addEventListener('change', function(e) {
startingEventVal = returnAirPort(e.srcElement.value);
console.log('startingEventVal', startingEventVal);
});
}
})();
submit.addEventListener('click', function(e) {
e.preventDefault();
var distance = IntentMedia.Distances.distance_between_airports(startingEventVal, destinationEventVal);
console.log('distance', distance);
document.getElementById('feedback').innerHTML = distance;
});
})();
Any help would be appreciated!

Fix this function:
//This is wrong because select.value refers to the value property of the select
//and you are comparing that to the selected option's text
function checkSelect(select) {
if (select.value == '-- select an option --') submit.disabled = true;
else submit.disabled = false;
}
Change it to this:
//Compare the selected option's text to see if it equals the default option text
function checkSelect(select) {
if (select.options[select.selectedIndex].text == '-- select an option --') submit.disabled = true;
else submit.disabled = false;
}

in the click event, try checking for the values of the inputs in an if statement and doing:
return;
to exit the function if they are the default values

Check/uncheck checkbox when input field (textbox) has a value

I want to clear the value of an input field (textbox) when the user unchecks a checkbox.
When the user types in the field, I want to check the checkbox.
Edit:
Funny how you get downvotes for doing exactly what StackOverflow recommends:
https://blog.stackoverflow.com/2011/07/its-ok-to-ask-and-answer-your-own-questions/

With this HTML:
<input id="thecheckbox" type="checkbox">
<input id="theinput" type="text">
You can use this javascript:
$("#theinput").keyup(function () {
if ($(this).val() == "") {
$("#thecheckbox").prop("checked", false);
} else {
$("#thecheckbox").prop("checked", true);
}
});
$("#thecheckbox").change(function () {
if (!$(this).is(':checked')) {
$("#theinput").val("");
}
});
It works when using the keyboard for tabbing and/or checking the checkbox.
http://jsfiddle.net/B39Yq/

HTML
<input id="text"/>
<input type="checkbox" id="check"/>
Javascript
$("#text").keyup(function(){
$("#check").get(0).checked = !!$(this).val().trim();
});
$("#check").click(function(){
(this.checked) ? "":$("#text").val("");
});
JS Fiddle: http://jsfiddle.net/p5u64/1/

function onKeyUp(event) {
var target = event.target;
if (target.nodeName && target.nodeName.toLowerCase() === "input") {
if (target.type && target.type == "text") {
changeCheckboxes(this, target.value)
}
}
}
function onChange(event) {
var target = event.target;
if (target.nodeName && target.nodeName.toLowerCase() === "input") {
if (target.type && target.type == "checkbox" && !this.checked) {
clearTextfields(this);
}
}
}
function clearTextfields(form) {
var elements = form.elements;
for (i = elements.length; i--;) {
if (elements[i].type === "text") {
elements[i].value = "";
}
}
}
function changeCheckboxes(form, check) {
var elements = form.elements;
for (i = elements.length; i--;) {
if (elements[i].type === "checkbox") {
elements[i].checked = check;
}
}
}
var form = document.forms[0];
form.addEventListener("keyup", onKeyUp);
form.addEventListener("change", onChange);
form.addEventListener("click", onChange);

How to show alert message using javascript to check checkbox?

I am using following code to detect whether the check box inside my gridview template field is checked or not. If none of the check box is selected then I want to show alert message.
function findCheckBox() {
var inputElements = document.getElementsByTagName('input');
var chekSelect = false;
for (var i = 0; i < inputElements.length; i++) {
var myElement = inputElements[i];
if (myElement.type === "checkbox") {
if (myElement.checked === false) {
chekSelect = true;
return true;
}
}
if (chekSelect === true) {
return true;
}
else {
alert('Please Check Atleast one record to print cheque!!!');
return false;
}
}
}
But with this code when I click on my button its showing me error message for one time even if one or more check box is checked. What I am doing wrong here. Can anyone help me please.

Your logic is slightly off. Corrected version:
jsFiddle demo
function findCheckBox() {
var inputElements = document.getElementsByTagName('input');
var chekSelect = false;
for (var i = 0; i < inputElements.length; i++) {
var myElement = inputElements[i];
if (myElement.type === "checkbox") {
if (myElement.checked) {
chekSelect = true;
break;
}
}
}
if(!chekSelect) {
alert('Please Check Atleast one record to print cheque!!!');
return false;
} else {
return true;
}
}
I've changed the .checked test, to test for it being true not false, because you want to know if at least one checkbox is checked. I also added a break, and moved the alert to outside of the for, because you won't know if there is a checkbox checked until the for completes.

Try this
function findCheckBox() {
var inputElements = document.getElementsByTagName('input');
for (var i = 0; i < inputElements.length; i++) {
var myElement = inputElements[i];
if (myElement.type === "checkbox" && myElement.checked) {
return true;
}
}
alert('Please Check Atleast one record to print cheque!!!');
return false;
}

Using JQuery:
var checked = false;
$('input:checkbox').each(function(){
if($(this).prop('checked')){
checked = true;
break;
}
});
if(!checked) alert('Please Check At least one record to print cheque!!!')

Checkbox and input field value

I have a check box which will change the value of a textfield to 1 when checked and change it back to zero when unchecked, how can I do this? I want it in javascript.

<input type="checkbox" name="foo" onclick="document.getElementById('idtextfield').value = +this.checked;" />

You can do like this:
var chk = document.getElementById('checkbox_id');
var txt = document.getElementById('textbox_id');
chk.onclick = function(){
if (this.checked === true){
txt.value = '1';
}
else{
txt.value = '0';
}
};

window.onload = function() {
var checkBox = document.getElementById('idofcheck');
if (checkBox == null) {
return;
}
checkBox.onclick = function() {
var textField = document.getElementByd('ifoftextfield');
if (textField == null) {
return;
}
if (this.checked) {
textField.value = '1';
} else {
textField.value = '0';
}
};
};

if(document.getElementById("checkbox1").checked)
{
document.getElementById('textbox1').value=1;
}
else
{
document.getElementById('textbox1').value='';
}