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.
$(this).is(':checked') you can simply use this.checked)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);
