当输入字段(文本框）有值时，选中/取消选中复选框

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

本文关键字：选中 取消 复选框 字段 输入 文本      更新时间：2024-04-05

我想在用户取消选中复选框时清除输入字段（文本框）的值。

当用户在字段中键入时，我希望选中复选框。

编辑：有趣的是，你是如何因为完全按照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);
相关文章：