我想在用户取消选中复选框时清除输入字段(文本框)的值。
当用户在字段中键入时,我希望选中复选框。
编辑:有趣的是,你是如何因为完全按照StackOverflow的建议行事而获得否决票的:https://blog.stackoverflow.com/2011/07/its-ok-to-ask-and-answer-your-own-questions/
使用此HTML:
<input id="thecheckbox" type="checkbox">
<input id="theinput" type="text">
您可以使用以下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("");
}
});
当使用键盘进行制表和/或选中复选框时,它会起作用。
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);